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celda. 180 

7.13. Este sera el objetivo del ejercicio 7.2. Una pista: debemos usar los atributos WIDTH, HEIGHT, 

ALIGN y VALIGN. 182 

7.14. Usando el atributo NOWRAP evitamos que el texto sea partido en varias llneas, sin embargo no es 

recomendable usarlo en llneas muy largas como esta. 185 


xi 




























Curso completo de HTML 


7.15. Los atributos COLSPAN y ROWSPAN nos permiten crear celdas que se extiendan varias columnas o 

varias filas. 187 
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estaran enlazadas entre sf. 203 
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anteriores. 208 
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6.33. Visualization de medida.htm .216 
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6.35. Resultado final de la pagina superOFE.htm .222 
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idea del World Wide Web. 227 
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7.9. Usando el atributo TYPE en una etiqueta LI podemos cambiar la vineta de un unico elemento de lista 

sin afectar a los demas.244 

7.1. Los cinco tipos distintos que puede tomar el atributo TYPE para listas ordenadas .245 
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servir de fndice y otro derecho con el contenido principal.281 
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293 
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171. Usando FRAMEBORDER="0" ocultamos los hordes de los frames con lo que se consigue una gran 
mejora en la apariencia. 295 

8.22. Aun usando el atributo FRAMEBORDER si hacemos la ventana del navegador pequena apareceran 
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300 
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184. Con los atributos ALIGN, MARGINWIDTH y SCROLL podremos controlar las diversas caracterfsti- 

cas de los frames flotantes. 317 
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10.5. A1 pulsar sobre un enlace a un archvo que no puede mostrar el mismo, Internet Explorer muestra este 

cuadro de dialogo preguntando al usuario que quiere hacer.326 

10.6. Cuadro de dialogo para archivos externos mostrado por Netscape Navigator. Si elejimos open la 

aplicacion externa asociada sera ejecutada. 327 

10.7. Usando el atributo LOWSRC se pueden crear animaciones sencillas pero impactantes como es el caso 

del web de Spectacle. 330 

10.8. La marquesina animada muestra un texto que va moviendose de derecha a izquierda en la ventana del 

navegador. En esta figura vemos 7 momentos consecutivos. 333 

10.9. La etiqueta MARQUEE esta acompanada de numerosos atributos que nos permiten controlar la 

apariencia de la marquesina. 336 

10.10. Internet Explorer 4.0 incluye una serie de nuevas tecnologfas entre las que destacan los nuevos 

controles multimedia. 338 

10.11. Macromedia distribuye a traves de su Web el plug-in necesario para visualizar en un Web animaciones 

creadas por su herramienta Director. 340 

10.12. Si el navegador tiene algun problema con el plug-in muestra un icono y un espacio en bianco que 

puede estropear la apariencia de nuestra pagina.342 

10.13. Usando los atributos WIDTH y HEIGHT de la etiqueta EMBED podemos lograr que los controles 

de sonido aparezean. Internet Explorer usa los controles de Windows. 344 

10.14. El plug-in usado por Netscape navigator ha creado sus propios controles que tienen la capacidad 

anadida de poder controlar el volumen.345 
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11.1. En la pagina Web de Sun Microsystems, creadora del lenguaje Java, podemos encontrar gran cantidad 

de documentation y ejemplos de sus posibilidades.347 
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11.3. Este es el aspecto que muestra nuestro primer applet insertado en una pagina Web. En un navegador 

con soporte Java podemos pulsar sobre los botones para obtener diferentes sonidos.351 

11.4. Usando applets Java podemos insertar juegos interactivos como en este caso. Usando el atributo 

CODEBASE no es necesario que el applet este en nuestro servidor. 353 

11.5. Usando los atributos ALIGN, VSPACE y HSPACE podemos insertar un applet rodeado de texto. 354 

11.6. El applet Animator.class es uno de los mas conocidos y usados en las paginas Web por la facilidad que 

ofrece para crear animaciones. 357 

11.7. El navegador Opera no soporta la tecnologla Java, por lo que mostrara el codigo alternative, en este 

caso uno de los GIFs de la animation. 358 

11.8. Resumen de todos los atributos de la etiqueta APPLET y de su subetiqueta PARAM.359 

11.9. La etiqueta OBJECT ha sido creada por los expertos del Web Consortium para englobar la inclusion 

de todo tipo de objetos en las paginas Web.361 

11.10. ForecastX ofrece un servicio meteorologico en tiempo real gracias a la tecnologla ActiveX. .. 364 

11.11. Usando este control ActiveX podemos crear efectos variados con texto, con lo que pueden sustituir 

el uso de imagenes con la consiguiente diminution tiempo de carga de nuestras paginas. 366 

11.12. Usando el mismo control ActiveX que en la figura 11.25 pero con un codigo algo mas complejo 

podemos crear este efecto tan atractivo. 368 

12.1. En la pagina principal de Tower Communications vemos un formulario que es usado para permitir a 

los visitantes introducir una cadena de texto que deseen buscar.371 
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empezar a escribir texto. 376 

12.5. Usando el codigo cINPUT TYPE="submit"> podemos insertar un boton de envlo de manera que al 

pulsar sobre el se envlan los datos del formulario. 378 
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12.8. El atributo ALIGN de la etiqueta INPUT nos permite alinear los controles. En este caso vemos una 

caja de texto alineada a la izquierda (ALIGN="left").382 

12.9. Las cajas de texto para claves muestran asteriscos en lugar del texto que escribimos para aumentar la 

confidencialidad. 384 

12.10. Los botones de eleccion permiten elegir entre un conjunto de opciones, de las cuales podemos elegir 

solo una. 385 

12.11. En un mismo formulario podemos incluir varios grupos de botones de eleccion. Los visitantes podran 

seleccionar una option en cada uno. 386 
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seleccionadas.388 
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12.17. Los navegadores en modo texto como Lynx tambien son capaces de mostrar formularios, que aunque 

no sean graficos tienen la misma funcionalidad.403 

12.18. En esta figura podemos apreciar cajas de texto y de clave, botones de election y cajas de selection 

tal y como son mostradas por Lynx.403 

12.19. El atributo TITLE es una extension de Microsoft que permite dar una description a los controles que 

sera mostrada en un bocadillo. 405 
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12.22. Lynx muestra las areas de texto como un conjunto de lineas (tantas como hemos indicado con el 
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ocasion vemos su forma de persiana desplegable.413 

12.25. Usando el atributo SIZE con un valor mayor que uno conseguimos que el cuadro de selection se 

muestre como una lista. 414 

12.26. Usando el atributo MULTIPLE el usuario podra seleccionar varias de las opciones que se ofrecen en 

la lista. 416 

12.27. El navegador Lynx tambien es capaz de mostrar cuadros de selection, por lo que podremos usarlo 

con libertad.417 

12.28. Este es el aspecto initial de la plantilla del sitio Web de Los Alpes. 419 

12.29. El primer paso sera modificar la plantilla, cambiando el titulo y la fecha y escribiendo un texto 

introductorio.419 

12.30. Usando los conocimientos adquiridos en este capitulo utilizamos las etiquetas INPUT y SELECT 

para crear los controles del formulario.421 

12.31. Usando una tabla de nueve filas y tres columnas controlamos la disposition de todos los elementos 

de la tabla para conseguir un diseno profesional. 423 

12.32. Este es el aspecto final del formulario una vez introducido en la estructura con frames del sitio Web 

creado en la practica 5. 425 

12.33. Como metodo alternative a los CGIs pueden mandarse los dates del formulario por correo 

electronico. En ese caso el navegador pedira al usuario confirmation de la action.428 

12.33. Como metodo alternative a los CGIs pueden mandarse los dates del formulario por correo 
electronico. En ese caso el navegador pedira al usuario confirmation de la action.430 
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En esta primera entrega de este Curso completo de HTML haremos un primer estudio del lenguaje HTML y 
analizaremos las herramientas que son necesarias o al menos recomendables para realizar una pagina web. Ademas 
aprenderemos que es y que no es el lenguaje HTML; cual es la estructura de una pagina web; como dar un titulo 
a nuestra pagina y como crear encabezados y texto en ella. 

Introduccion 

El World Wide Web (WWW) es un sistema que contiene una cantidad de information casi infinita. Pero esta 
information debe estar ordenada de alguna forma de manera que sea posible encontrar lo que se busca. La unidad 
basica donde esta almacenada esta information son las paginas Web. Estas paginas se caracterizan por contener 
texto, imagenes, animaciones... e incluso sonido y video. 

Una de las caracterfsticas mas importantes de las paginas Web es que son hipertexto. Esto quiere decir que las 
paginas no son elementos aislados, sino que estan unidas a otras mediante los links o enlaces hipertexto. Gracias 
a estos enlaces el navegante de internet puede pulsar sobre un texto (texto al que llamaremos de ahora en adelante 
activo) de una pagina para navegar hasta otra pagina. Sera cuestion del programador de la pagina initial decidir 
que palabras o frases seran activas y a donde nos conducira pulsar sobre ellas. 

En algunos ambientes se discute que el World Wide Web ya no es un sistema hipertexto sino hipermedia. Los 
que defienden el cambio se apoyan en que aunque en sus orfgenes el WWW constaba unicamente de texto en la 
actualidad es un sistema principalmente grafico y se puede hacer que las zonas activas sean, no solo texto, sino 
imagenes, videos, botones,... en definitiva cualquier elemento de una pagina. Aun asf, el termino original no ha 
sido reemplazado todavfa y por tanto sera el empleado a lo largo de esta obra. 
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Figura 1.1. Aunque al principio el texto predominaba en el WWW, en la actualidad 
las imagenes son mayoria como podemos observar en una de las principales webs del 
proyecto KDE. 



Caracteristicas del lenguaje HTML 

Pero empecemos ya con lo que nos interesa. ^Como se hace una pagina Web? Cuando los disenadores del WWW 
se hicieron esta pregunta decidieron que se deblan cumplir, entre otras, las siguientes caracteristicas: 


• El Web tenia que ser distribuido: La information repartida en paginas no muy grandes enlazadas entre si. 

• El Web tenia que ser hipertexto y debla ser facil navegar por el. 

• Tenia que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de trabajo...) y con todo 
tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS,...). 

• Debla ser dinamico: el proceso de cambiar y actualizar la information debla ser agil y rapido. 
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Estas caracterfsticas son las que marcaron el diseno de todos los elementos del WWW incluida la programacion de 
paginas Web. Como respuesta a todos estos requisitos se creo el lenguaje HTML (HiperText Markup Language), 
cuyas siglas significan "lenguaje hipertexto de marcas". 

Este lenguaje sera el encargado de convertir un inocente archivo de texto initial en una pagina web con diferentes 
tipos y tamanos de letra, con imagenes impactantes, animaciones sorprendentes, formularios interactivos, etc. 

Que se necesita para crear una pagina web 

Una de las caracterfsticas de este lenguaje mas importantes para el programador es que no es necesario ningun 
programa especial para crear una pagina Web. Gracias a ello se ha conseguido que se puedan crear paginas con 
cualquier ordenador y sistema operativo. El codigo HTML, como hemos adelantado en el parrafo anterior, no es 
mas que texto y por tanto lo unico necesario para escribirlo es un editor de texto como el que acompanan a todos 
los sistemas operativos: edit™ en MS-DOS, block de notas en Windows,vi™en UNIX, etc. Por supuesto estos no 
son los unicos editores de texto que pueden ser usados, sino cualquier otro. Tambien se puede usar procesadores 
de texto, que son editores con capacidades anadidas, compo pueden ser Microsoft Word™ o WordPerfect™ pero 
hay que tener cuidado porque en ocasiones hacen traducciones automaticas del codigo HTML que no siempre son 
deseadas. En estos dos ultimos casos, tambien hay que tener en cuenta que deberemos guardar el archivo en modo 
texto. 

Figura 1.2. Un editor de texto simple, como el block de notas de Windows, es todo lo 
necesario para crear una pagina Web 



Una vez hemos escrito el codigo deberemos guardar el archivo (con formato de texto) con la extension . html ( o 
. htm en MS-DOS, Windows 3.1 o cualquier otro sistema que solo acepte tres letras en la extension. Los siguientes 
son nombres validos de archivos que contengan codigo HTML: index.html, index.htm,principal .html, 
PRINCIPAL. htm, etc... 

NOTA: Si el editor o procesador de textos usado para crear la pagina obliga a usar la extension . txt al guardar el 
archivo en modo texto, deberemos guardarlo con esta extension, por ejemplo como index. txt, y posteriormente 
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cambiar el nombre del archivo desde fuera del programa a index . html o index . htm . Para ello usaremos el 
comando rename en MS-DOS; en Windows 3.1 lo haremos mediante el administrador de archivos y en Windows 
95 con el explorador. En otros entomos, como Linux, es mas raro que se de esta situation. 

ATENCION: El World Wide Web es un sistema que diferencia las mayusculas de las minusculas. Es un error 
comun llamar a un archivo index. html y luego referirse a el como index. html. Aunque en nuestro ordenador 
puede funcionar al publicarlo seguramente no lo hara. Por esta razon es una norma general usar siempre 
minusculas para los nombres de los archivos html. 

Ultimamente han aparecido nuevas altemativas que facilitan la programacion de paginas Web. Son los editores 
HTML. Podemos dividir estos editores en dos grupos: 


1 Asistentes: ayudan a crear el codigo HTML e incluyen plantillas de codigo prefabricadas, por ejemplo 
HotDog™ (Win), HomeSite™(Win),HTML Editor™ (Mac), Quanta™ (Linux, KDE) o Bluefish™, (Linux, 
GNOME). 

1 Conversores: son programas con otra funcion que la de la programacion Web pero que permiten convertir a 
HTML. Son ejemplos de conversores Microsoft Word ™,Quark XPress™ y PageMaker™. 

Editores WYSIWYG (What You See Is What You Get, lo que ves es lo que obtienes): estos editores 
permiten crear paginas web sin escribir codigo HTML como si se tratase de un programa de dibujo por 
ordenador. Algunos ejemplos de este tipo de editores son Macromedia Dreamweaver™, HotMetal™ o 
Microsoft Frontpage™. 
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Figura 1.3. Algunos editores WYSIWYG permiten, ademas, modificar el codigo HTML 
directamente. 


V Editor de FrontPage - [Hypertext Markup Language - 2.0 - Table of Contents] 


^ Archivo Edicion Ver Ir a Inserter Formato Herramientas Table Marco Ventana Ayuda 


i m a 


tn c* 


PUB 



jEncabezado 1 "§fl | [fuente predeterminada) A 


H K S 


< !DOCTYPE HTHL PUBLIC "-//IETF//DTD HTML 2.0 Strict Level 2//EN rr > 
<html> 

<! — Url : "http: //ww. m3. org/HarkUp/html-spec/html-spec_toc.html" — > 


<head><!— This HTHL file has been created by texi2html 1.36 
from html-spec.texi on 18 October 1995 --> 


<title>Hypertext Markup Language - 2.0 - Table of Contents</title> 
</head> 


<body> 

</hl> 

<h2>September 22, 1995 </h2> 

<address> 

T. Berners-Lee (1) 

</address> 


<address> 

Bn Co nnnllv m - ( , 

\ Normal \HTML/( Vista previa / |jJ_| 

13 segundos 


Algunas razones para usar HTML 

Todos estos editores HTML tipos pueden ser de gran ayuda y tienen sus ventajas e inconvenientes, pero la 
experiencia demuestra que conocer el lenguaje HTML ofrece bastantes ventajas: 


• Seremos capaces de aprovechar todas las caracterfsticas de este lenguaje, incluso las mas nuevas. 


T 
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• Aunque se use inicialmente un editor WYSWYG tendremos los conocimientos suficientes para modificar 
posteriormente el codigo que este ha creado. As! se pueden corregir errores o incluir etiquetas no soportadas 
por el editor. 

• No dependeremos de la disponibilidad de una herramienta concreta para poder crear paginas web. Con un 
simple editor de textos sera suficiente. 

El principal problema de usar editores conversores y WYSIWYG es la necesidad de trabajar con dos archivos- 
fuentes por separado, por un lado el archivo del editor y por otro el archivo del codigo HTML una vez generado, 
lo que nos complica la vida a la hora de realizar cambios en nuestro Web. Sin embargo su utilidad es innegable y 
su combination con un buen conocimiento del lenguaje HTML nos convertira en unos grandes programadores de 
paginas Web capaces de realizar creaciones impactantes visualmente y de gran calidad tecnica. 

HTML es un lenguaje descriptivo 

Probablemente el lector ha usado alguna vez un procesador de texto (Abiword™, Microsoft Word ™ o KWord™) 
o un programa de description de paginas (QuarkXPress™). Con este tipo de aplicaciones el usuario tiene un 
control total sobre los elementos del documento: se le puede decir al programa "pon este texto con este tamano", 
"situalo a 1 cm. del borde", "usa este sangrado para los parrafos", etc... Con HTML el programador no tiene 
este tipo de control sobre los elementos que incluira en su pagina. El objetivo de este lenguaje sera simplemente 
describir como es una pagina de manera que examinando esa description el navegador del usuario final sea capaz 
de mostrarlo de la mejor manera posible. Con HTML podremos indicarle al navegador que este es un titular, aqul 
comienza un parrafo, estos son elementos de una lista, etc. posteriormente el navegador decidira como mostrar 
esos elementos. 
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Figura 1.4. Los navegadores en modo texto como Lynx tambien pueden mostrar paginas 
Web gracias al caracter descriptivo de HTML. 


IENAC - Ingenien 

IENAC 

Ingenieros en Accion 

"Accion Solidauia UPM: Ingenieros en Accion" nacio en ^ 
Suugio como forma de plasmar algunas actividades de in< 
diversos grupos de estudiantes, dentro de la U.P.M., v 
realizando. Se buscaba crear una Asociacion que fuera . 
desde la cual se llevaran a cabo iniciativas de ayuda ] 
social. 

[USEMAP] 

[Breve histouia] [Actualidad] [Sugeuencias] [Links] [3: 

discapacidad] [Como colaborar] 

Actualmente las principales actividades de la asoci; 

siguientes: 

(pulsa sobre el titulo para acceder a informacion ma; 

cada actividad): 


- press space for next page - 


Arrow keys: Up and Down to move. Right to follow a link, 
IH)elp O)ptions P)rint G)o M)ain screen Q)uit /^search [d 


^Por que funciona asl? En un principio esta caracterfstica del HTML puede resultar molesta para el creador 
de la pagina, que no puede saber como sera vista su pagina mas que de una forma aproximada. Sin embargo 
es fundamental para conseguir que el World Wide Web pueda ser navegado con cualquier tipo de ordenador 
(dicho con otras palabras, que el WWW sea multiplataforma). Debemos tener en cuenta que no todos los 
sistemas operativos son graficos, que incluso usando un mismo sistema operativo existen diferentes resoluciones 
de pantalla, ... Por esta razon el lenguaje necesario para crear paginas debe ser descriptivo y como consecuencia 
tras crear una pagina el programador debe ver como es mostrada con varios navegadores distintos como Netscape 
Navigator™ o Microsoft Internet Explorer™ incluyendo algun navegador de texto como Lynx™. 

Pero una consecuencia mas importante aun de esta caracterfstica, es que ha permitido que aparezcan navegadores 
vocales, que leen las paginas en vez de mostrarlas. Gracias a ello personas ciegas tambien han podido disfrutar 
del WWW. Es mas, esta misma tecnologfa esta siendo usada para los nuevos navegadores embarcados en coches 
que leen la pagina al conductor para que no se distraiga. 


T 
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NOTA: Una vez creada una pagina es recomendable probar nuestra pagina, no solo con varios navegadores, sino 
tambien con varias resoluciones de pantalla distintas como por ejemplo: 640x480, 800x600 y 1024x768. Si existe 
la posibilidad de probarlo ademas con un navegador vocal, mucho mejor aun. 

Un buen ejemplo de este caracter descriptivo es la definition de titulares, tambien llamados encabezados, en 
HTML. Vamos a adelantamos un poco en esta introduction para mostrar este ejemplo, en el se muestra como 
poner el titular de una pagina: 


<hl>Bienvenido a la pagina de La Super Editorial</M> 


Con este codigo estamos describiendo el texto Bienvenido a la pagina de La Super Editorial como el texto de 
maxima importancia en nuestra pagina, es el titular. En los navegadores mas usados como el Netscape Navigator™ 
o el Microsoft Internet Explorer™ este titular sera mostrado como un texto en negrita y de tamano grande (el 
tamano mas grande posible). Sin embargo repetimos una vez mas que existen navegadores como pueden ser Lynx 
™ o Emacs-W3™ que son bastante usados por la comunidad academica y universitaria que solo pueden mostrar 
texto y no pueden variar el tamano de la letra. Por esta razon la etiqueta <hl> no dice que el texto que encierra 
debe ser de tal tamano o si debe ser negrita o no. Esta etiqueta solo le dice que este texto es el mas importante de 
la pagina, el titular. Sabiendo esto el navegador que funcione en modo texto puede resaltar dicho titular con los 
medios de que dispone, como por ejemplo poniendolo en mayusculas o usando distintos sangrados. 

Tambien podemos encontrar ventajas de la description mirando al futuro. Imaginemos que la informatica 
evoluciona hasta tal punto que los monitores de dentro de unos anos pueden mostrar objetos en tres dimensiones. 
Serfa muy interesante que el titular de nuestra pagina fuese en 3-D de manera que resaltase lo maximo posible. 
Pues bien, si lo hemos definido como cabecera principal (y no como letra de tamano 20 puntos y en negrita, por 
ejemplo) el navegador sabe que queremos que ese texto sea el mas importante y puede actuar de manera inteligente 
poniendolo automaticamente en tres dimensiones, ;sin que nosotros hayamos cambiado una sola llnea de nuestro 
codigo! Parece interesante / no? 

Una vez a quedado claro cual es el esprritu de HTML, hay que decir que ultimamente se han introducido metodos 
para conseguir un mayor control sobre las paginas. Estos metodos permiten controlar aspectos como el tamano de 
la letra la disposition (aproximada) de imagenes y texto de manera que se facilita la labor del programador. Pero 
hay que tener siempre en mente que siempre habra ligeras diferencias entre como veran las paginas unos usuarios 
u otros y no debemos pretender poder controlar la presentation y diseno de nuestra pagina hasta el mlnimo detalle. 

Las bases de HTML 

Una vez repasadas unas nociones basicas de HTML y de la programacion de paginas Web en general entraremos 
de lleno en la programacion con este lenguaje. Pronto nos daremos cuenta de la sencillez de este lenguaje lo que 
le convierte en un lenguaje muy facil de aprender y que nos permitira crear paginas con mayor facilidad aun. 

Las ordenes de este lenguaje estaran formadas por unos comandos llamados etiquetas que pueden tener o bien la 
siguiente estructura: 

<NOMBRE_E TIQUE TA> 

O bien esta otra: 

<NOMBRE_ETIQUETA> TEXTO C/NOMBRE ETIQUETA> 


Como vemos, la primera estructura esta formada por una unica instruction y la segunda por dos: una que marca 
el initio de la etiqueta y otra que marca el final, con texto entre ambas. 
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Por ejemplo, para indicarle al navegador que queremos que pinte una llnea horizontal debemos escribir: 

<hr> 

As! de sencillo. Como vemos, el nombre de la etiqueta va delimitado por los slmbolos menor que (<) y mayor 
que (>), todas las instrucciones de HTML deben ir encerradas entre estos dos slmbolos. 

Pero las etiquetas no se limitan a indicar ordenes tan sencillas, estas ordenes tienen en ocasiones parametros. 
Por ejemplo la etiqueta <hr> tal y como lo hemos hecho anteriormente darfa lugar a la llnea que vemos en la 
figura 1.5, es decir le dice al navegador que dibuje una llnea horizontal en la pantalla. Esta llnea tiene un grosor 
predeterminado y un ancho variable en funcion del tamano de la ventana del navegador. 

Figura 1.5. Uso basico de una etiqueta HTML sin ningun tipo de parametros. Ejemplo 
usando la etiqueta <hr> para crear una linea horizontal. 



Sin embargo hay muchas formas de pintar una llnea y serfa deseable poder elegir detalles tales como la anchura y 
el grosor que va a tener dicha bnea. Para especificar este tipo de detalles se crearon los atributos de las etiquetas. 
Este nuevo elemento se introduce en una etiqueta de la siguiente manera: 


<etiqueta atributo="valor"> 


Es decir, en primer lugar ponemos el nombre de la etiqueta, despues el nombre del atributo seguido por un signo 
igual y posteriormente el valor que queramos darle a ese atributo encerrado entre comillas una etiqueta puede 
tener tantos atributos como se deseen y en ocasiones son necesarios para que la etiqueta tenga algun significado. 

En nuestro ejemplo de la bnea horizontal existe un atributo llamado SIZE, que significa tamano en ingles, que 
permite controlar el grosor de la llnea que sera dibujada en pantalla. Veamos un ejemplo, en la figura 1.6 podemos 
ver la llnea horizontal con diferentes grosores. 
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Figura 1.6. Las etiquetas tienen atributos para cambiar aspectos del efecto que producen. 
En este ejemplo vemos como se puede cambiar el grosor de una linea con el atributo SIZE. 


Q Ejemplo de uso de <HR> - Microsoft Internet Explorer - [Trabajar sin conexion ... 





El valor que toma el atributo size determina el numero de puntos de pantalla o pixeles que debe ocupar, en grosor, 
la linea. En posteriores capltulos estudiaremos en detalle la etiqueta <hr> y todos sus atributos. 

En la figura 1.6 vemos que el valor numerico que le damos al atributo size no va entrecomillado, por ejemplo 
en <hr size=5>. En HTML no es necesario entrecomillar los valores de los atributos cuando estan formados 
unicamente por numeros [0-9], letras [a-z, A-Z], guiones y puntos. En todo caso es muy recomendable incluir 
las comillas siempre. De esta forma no tenemos que preocuparnos de cuando ponerlas y cuando no y a la vez 
cumplimos el nuevo estandar XHTML. Para los curiosos adelantaremos que XHTML es identico a HTML pero 
con algunas restricciones adicionales del mundo de XML. 

Antes de empezar con el codigo HTML basico conviene hacer saber al lector que aunque en todos los ejemplos 
usados hasta ahora las etiquetas usadas estaban escritas en mayusculas en realidad es indiferente el uso de estas o 
de minusculas. Sin embargo las mayusculas son de uso comun para que sea mas facil distinguirlas del texto y por 
tanto seguiremos usando este convenio a lo largo del curso. 

En los ejemplos tambien usaremos distinto sangrado (alineacion de los parrafos) para los diferentes elementos 
del codigo para mostrar los niveles de anidamiento. Este sangrado no es necesario y el lector puede optar por 
ignorarlo si decide copiar los ejemplos para verlos en su navegador, sin embargo facilita la lectura del codigo y no 
afecta al modo en que los objetos de nuestra pagina seran mostrados. 

Primeros pasos con HTML 
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Conocidas ya las principales caracterfsticas de HTML estamos listos para aprender sus principales etiquetas y para 
crear nuestra primera pagina. 

Estructura de una pagina 

Todo documento HTML esta formado por los bloques que podemos apreciar en la figura 2.1. Pasemos a explicar 
cada uno de ellos. 

Figura 2.1. Estructura de bloques de un documento HTML. 


Q Formato de parrafos - Microsoft Internet Explorer 


Archive Edicion Ver Ir a favoritos Ayuda 

; ~j >- g ii 

El conductor del coche le pregunto si 
encontraba mal 

IB Listo I I I IjpMiPC 


En primer lugar deberemos especificar que el archivo de texto que estamos escribiendo es un documento HTML, 
para ello usamos las instrucciones de initio y fin de la etiqueta <html> al principio y al final de la pagina 
respectivamente: 


<html> 

Codigo de la pagina 
</htral> 


El codigo de la pagina esta formado a su vez por dos grandes bloques, la cabecera y el cuerpo. 

La cabecera de la pagina esta delimitada por las instrucciones de inicio y fin de la etiqueta head. Estas 
instrucciones deben estar dentro de la etiqueta HTML de la siguiente manera: 


<html> 

<head> 

Elementas de la cabecera 
</head> 

... Resto de eddigo de la pagina ... 
</html> 


En la cabecera de la pagina se introduce toda aquella information que afectara a toda la pagina. En un principio 
esta information se limitara al tltulo. Este tltulo se indicara con la etiqueta title usando la siguiente sintaxis: 


TT 
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<html> 

<head> 

<title>Mi primera pagina WEB</title> 
</head> 

</html> 


El resultado de ver esta pagina con nuestro navegador es el que se observa en la figura 2.2. Como vemos, el 
area de la pantalla donde suele estar la pagina esta todavla vacla, pero si nos fijamos en la cabecera de la ventana 
del navegador vemos que el tltulo a pasado de ser Microsoft Internet Explorer ™ a "Mi primera pagina WEB - 
Microsoft Internet Explorer™". Es decir el tltulo que le demos a nuestra pagina con la etiqueta <title> pasara 
a ser el tltulo de la ventana del navegador. 

Figura 2.2. El tltulo de la pagina es mostrado en la parte superior de la ventana del 
navegador. 
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Ademas cuando un usuario vea nuestra pagina y decida incluirla en su lista de webs preferidos con la option 
agregar a favoritos del menu Favoritos del navegador (en este caso el explorer) anadira el nombre que le hemos 
dado a nuestra pagina en dicho menu, tal y como podemos apreciar en la figura 2.3. Aunque el nombre con el que 
se almacena un Favorito puede ser cambiado por el usuario, si hemos puesto un buen tltulo, lo suficientemente 
descriptivo a cada una de nuestras paginas le evitaremos esa molestia. 

Figura 2.3. Cuando los navegantes incluyan nuestra pagina a su menu de favoritos en su 
menu aparecera el titulo que le hayamos dado a nuestra pagina con la etiqueta <title> 



Es importante resaltar que nada de lo que se ponga en la cabecera de la pagina sera mostrado en la zona del 
navegador dedicada a mostrar el contenido, es decir, en la zona que vemos en bianco en la figura 2.2. 

Esto nos induce a pensar que existe otra forma de indicar como sera el contenido de la pagina, pues as! es: el 
cuerpo es el siguiente gran bloque de nuestro documento HTML, este quedara delimitado por la etiqueta body. 
En su interior introduciremos todos aquellos elementos de los que queremos que conste nuestra pagina como 
pueden ser testo, imagenes, tablas, etc. Conociendo la etiqueta body podemos ampliar el ejemplo anterior para 
que incluya texto. 
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;?®^fcml> 

<head> 

<title>Mi primera pacjMf' a WEB</title> 

</head> 

<body> 

Hal a a todos, como han deducido por el J^pjulo esta es la 
primera pagina web que hago, espero que les 
guste . Fdo. Jorge 
</body> 

</html> 


En la figura 2.4 podemos apreciar como muestra el Internet Explorer™ este codigo. Como vemos todo el texto 
que hemos escrito entre las instrucciones de initio y fin forman ahora el cuerpo de nuestra pagina. 


T4T 
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Figura 2.4. En esta figura observamos la zona de la ventana en la que los navegadores 
mostraran el texto que pongamos en el cuerpo de la pagina. 



NOTA: Es posible que aunque no incluyamos las etiquetas html o body nuestras paginas sean visualizadas con 
algunos navegadores. Sin embargo no debemos confiarnos ya que lo mas seguro es que con el resto de navegadores 
no se vean bien. Por esta razon es muy recomendable usar ambas etiquetas tal y como se ha descrito. 

Una vez que ya sabemos insertar contenido en una pagina pasaremos a estudiar las diferentes etiquetas que sirven 
para darle formato a ese contenido. 

Los encabezados 

Usualmente un documento tiene, ademas de texto llano, una serie de encabezados o titulares. Para ello el lenguaje 
HTML posee una serie de etiquetas que permiten disponer de titulares de hasta 6 niveles de importancia. 
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Estas etiquetas son: <hl>, <h2>, <h3>, <h4>, <h5> y <H6>. Laletra "h" alprincipio del nombre de estas etiquetas 
provien de la abreviatura de la palabra inglesa heading que significa encabezado. Siguiendo a la hache hay un 
numero del uno al seis que indica la importancia del titular siendo el mas importante el uno y el menos importante 
el seis. En la figura 2.5 se puede ver un ejemplo de como muestra las cabeceras Internet Explorer™. 
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Figura 2.5. Distintos tipos de encabezados vistos con Microsoft Internet Explorer™. 



El codigo usado en este ejemplo es el siguiente: 


T T 
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<hl>Encabezada l</hl> 
<h2>Encabezado 2</h2> 
<h3>Encabezado 3</h3> 
<h4>Encabezado 4</h4> 
<h5>Encabezado 5</h5> 
<h6>Encabezado 6</h6> 


NOTA: Los encabezados empiezan siempre en una llnea nueva y el texto que les sigue comenzara en la llnea 
siguiente. Ademas el navegador podra mostrar un espacio vertical adicional entre el encabezado y el texto anterior 
y posterior. 

En el observamos que todos los titulares estan en negrita y el tamano de la fuente usada para cada encabezado va 
decreciendo conforme decrece la importancia del titular. Pero hay que tener en cuenta, tal y como comentabamos 
en la introduction, que este es solo un ejemplo y que otros navegadores pueden mostrar estos encabezados de 
manera diferente. 

Por otro lado los navegadores mas usados hoy en dla son el Internet Explorer™ y el Netscape Navigator™ y es 
normal prestarles una atencion especial (aunque no exclusiva). Y en la figura 2.6 podemos apreciar como con 
este ultimo se muestra los encabezados de una manera practicamente identica. Por esta razon podemos estar casi 
seguros de que los usuarios veran los encabezados de la forma mostrada en ambas figuras. 

Figura 2.6. Distintos tipos de encabezados vistos con Netscape Navigator 


Ejemplo de uso de BLOCKQUOTE - Microsoft Internet Explorer ... 


Archivo Edicion Ver |r a Favoritos Ayuda 
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Ejemplo de uso de <BLOCKQUOTE> 

Mi poema favorito es aquel de Federico Garcia Lorca que reza: 

Mi corazon, como una sierpe 
se ha desprendido de su piel, 
y aqui la miro entre mis dedos 
llena de heridas y de miel 


. 


d 


Mi PC 
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Hay que destacar que los encabezados de hi a h4 pueden ser usados como tltulos ya que los navegadores suelen 
usar un tamano de letra mayor que el habitual para mostrarlos. Sin embargo los encabezados h5 y h6 suelen 
ser mostrados con letra mas pequena aun que el texto y por esta razon se usan como notas a pie de pagina o 
comentarios de poca importancia. 

El ejemplo mejorado 

Ahora que sabemos usar encabezados los utilizaremos para mejorar ligeramente nuestra pagina. En la figura 2.7 
podemos ver como se muestran las modificaciones. 

Figura 2.7. Ejemplo de pagina Web con dos tipos de encabezados y dos parrafos. 



Esta pagina ha sido creada con el siguiente codigo: 


<html> 

<head> 

<title>Mi primera pagina WEB</title> 

</head> 

<body> 

<hl>Mi primera pagina WEB</hl> 

<h2>8ienvenida</h2> 

Hola a todos, como han deducido por el titulo esta es la 
primera pagina web que hago, espero que les guste. Fdo. Jorge 
<h2>Proposita</h2> 
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En esta pagina ire practicando con los conocimientos que 
adquiera en el curso de HTML. 

</htrnl> 


Conclusion 

Ya sabemos mucho sobre la programacion de paginas. Conocemos las principales caracterfsticas del lenguaje 
HTML y que es necesario para crear un Web. Hemos aprendido ademas las bases del lenguaje y hemos creado 
nuestra primera pagina de ejemplo, con texto y en cabezados, y la hemos puesto un tltulo. 

En la siguiente entrega realizaremos la primera pagina web complete, con parrafos, imagenes e hiperenlaces. 
Aprenderemos tambien a alinear el texto a los dos lados de la pagina y a combinar esta alineacion con la inclusion 
de imagenes. Igualmente veremos como es posible crear enlaces a distintos puntos de una pagina as! como a otras 
paginas o puntos concretos de estas. 




La primera pagina Web 

Jorge Ferrer 
Victor Garcia 

Version 1.0 

Copyright Jorge Ferrer y Victor Garcia. Se otorga permiso para copiar, distribuir y/o modificar este doc- 
umento bajo los terminos de la Licencia de Documentation Libre GNU, Version 1.1 o cualquier otra ver¬ 
sion posterior publicada por la Free Software Foundation. Puede consultar una copia de la licencia en: 
http://www.gnu.org/copyleft/fdl.html 

Tras un primer capitulo en el que hemos aprendido lo sencillo que es crear una pagina Web con el lenguaje 
HTML avanzamos en este segundo explicando las etiquetas mas usadas a la hora de crear paginas y terminaremos 
elaborando la nuestra propia. 

Hasta ahora hemos creado algunas paginas sencillas en HTML en las que fuimos capaces de introducir encabeza- 
dos y parrafos sencillos. En este capitulo aprenderemos una serie de etiquetas con las que tendremos conocimien- 
tos suficientes para elaborar una pagina profesional. Los temas que seran cubiertos en este capitulo son: parrafos 
en HTML, la etiqueta center, como insertar imagenes y como crear enlaces hipertexto. 

Parrafos en HTML 

Ha llegado el momenta de aprender a introducir un texto en una pagina web, pero antes es necesario comprender 
como sera interpretado este texto. Cuando un navegador lee el codigo HTML de una pagina y lo interpreta para 
mostrar la pagina, todos los espaciados multiples, tabulados o saltos de linea que se haya incluido en los textos 
seran interpretados como un unico espacio. Esta caracteristica suele sorprender (e incluso molestar) al principio, 
pero es innegable que esta forma de actuar es necesaria y concuerda con el caracter descriptivo de HTML. 

La mejor manera de habituarse es probar, para ello proponemos los siguientes ejemplos de codigo que seran 
mostrados de la misma forma por el navegador aunque algunos contengan saltos de linea, otros tabulados entre las 
palabras, etc. 


<hl>El conductor del coche le pregunto si se encontraba mal</hl> 
<hl> 

El conductor del coche le pregunto si se encontraba mal 
</hl> 

<hl> 

El conductor del coche 
le pregunto #!-se encdatraba mal 


En estos ejemplos podemos observar diversos saltos de linea y separaciones en el texto, sin embargo el navegador 
mostrara un solo espacio entre las palabras y producira saltos de linea donde sea necesario en funcion del tamano 
de la ventana. Las figuras 2.1 y 2.2 son ejemplos de como muestra el Explorer™ los codigos anteriores para 
diferentes tamanos de ventana. 
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Figura 2.1. Uso basico de una etiqueta HTML sin ningun tipo de parametros. Ejemplo 
usando la etiqueta <hr> para crear una linea horizontal. 



Conocida esta caracteristica es momento de adentrarse en las distintas etiquetas que permiten tener un mayor 
control sobre el texto de nuestras paginas. 

Saltos de linea 

En ocasiones puede ser conveniente introducir un punto y aparte cuando estamos escribiendo un texto. En HTML 
para hacer esto puede usarse la etiqueta <br>. Cuando el navegador se encuentra con esta etiqueta provoca un 
salto de linea y sigue mostrando el contenido de la pagina. Veamos un ejemplo: 


Estaba internandose en lo desconocido. <br> 

Durante todo el trayecto hasta Woodfield no dejo de pensar en los 
aspectos econdmicos, con el temor de estar cometiendo... 


En este texto podemos observar como tras el primer punto era necesario un cambio de linea, por lo que hemos 
usado <br>. 

Como se insertan parrafos 

Un parrafo es un conjunto de frases sobre un mismo asunto. En HTML para demarcar un parrafo se usa la etiqueta 
p, situandose la instruccion de inicio <p> al comienzo del parrafo y la instruccion de fin </p> tras la ultima frase. 
Entre ellas pueden insertarse tantos saltos de linea como se deseen asf como muchos otros elementos HTML. A 
continuation se muestra un ejemplo: 


Estaba internandose € 
</p> 


lo desconocido. 


Durante todo el trayecto hasta 

Woodfield no dejo de pensar en los aspectos ccor.6rr.icos. 


el 
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Figura 2.2. Las etiquetas tienen atributos para cambiar aspectos del efecto que producen. 
En este ejemplo vemos como se puede cambiar el grosor de una linea con el atributo ’size’ 


| □ Formalo de parraf... 
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temor de estar comet: er.do. . . 
</p> 


Otra opcion hubiera sido crear un unico parrafo e insertar un salto de lmea tras la primera frase: 


<p> 

Estaba internandose en lo desconacido. 

Durante todo el trayecto hasta 

Woodfield no dejo de pensar en los aspectos ecor.6rr.icos, con el 
temor de estar conjetiendo. . . 

</p> 


En la figura 2.3 se puede observar la diferencia entre los dos ejemplos en Explorer™. Puede observarse que en 
general los navegadores dejan un espacio vertical antes y despues de cada parrafo, algo que no ocurre con los 
saltos de lmea. 

Figura 2.3. Ejemplo de un parrafo con un salto de linea y la division del mismo texto en 
dos parrafos. 
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Uso incorrecto de la etiqueta p 

La etiqueta p es usada en muchas paginas de forma incorrecta. El error consiste en emplearla simple- 
mente para introducir un espacio (vertical) entre lmeas. La forma adecuada es introducir las instrucciones 
de inicio y fin para marcar el comienzo y el fin de un parrafo. 

Espacio entre lmeas 

Para introducir un espacio vertical entre lmeas debe usarse la etiqueta <br>. Si se ponen varias seguidas 
no se mostrara mas espacio, pero esto puede solucionarse insertando entre las etiquetas la cadena "Por 
ejemplo para insertar tres lmeas en bianco puede usarse: 


<br> &nbsp; 
<br> &nbsp; 
<br> &nbsp; 


El atributo ’align’ en la etiqueta <p> permite especificar la alineacion del parrafo. Puede tener tres valores: 
"center", "left" y "right", para obtener un parrafo centrado, alineado a la izquierda o alineado a la derecha 
respectivamente. En la figura 2.4 se muestra el parrafo del codigo anterior con los tres tipos de alineacion. 
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Figura 2.4. Con el atributo ’align’ se pueden crear parrafos alineados a la derecha, 
centrados o alineados a la izquierda. 



Lineas horizontales para separar parrafos 

Si lo que se necesita es separar dos secciones diferentes de una pagina, ya sea texto o no, puede emplearse una 
nueva etiqueta: <hr>. Su nombre proviene del ingles Horizontal Rule (linea horizontal). Esta etiqueta esta 
formada por una unica instruccion y provoca que el navegador inserte una linea horizontal como la mostrada en 
la figura 2.3 que separaba los dos parrafos que se estaban comparando. Existen cuatro atributos que permiten 
modificar su apariencia. Estos son: 


”25” 
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’align’: Permite cambiar la alineacion de la linea. Puede tomar tres valores: "left", "center" y 

"right" para conseguir alineacion a la izquierda, centra y derecha respectivamente. 


’noshade’: ’noshade’, que en ingles significa sin sombra, existe porque algunos navegadores 

graficos como Navigator™ o Explorer™ muestran las lineas horizontales con un 
efecto tridimensional con sombra. A1 incluir este atributo se elimina este efecto de 
manera que el navegador solo mostrara una lrnea horizontal negra. 


’size’: Con este atributo se puede controlar el grosor de la lrnea. Como valor de este atributo se 

debe especificar el valor deseado en pixeles (puntos de pantalla). 


’width’: Este atributo permite especificar el ancho de la lrnea. El valor puede ser dado de 

una manera absoluta, especificando el ancho en pixeles (por ejemplo width=100) o 
de manera relativa respecto al ancho de la ventana del navegador usando porcentajes 
(por ejemplo width="90%"). Es mas que recomendable usar este ultimo sistema de 
manera que obtengamos un resultado apropiado independientemente del tamano que 
cada usuario quiera dar a la ventana de su navegador. 

Estos atributos pueden ser usados conjuntamente para combinar sus efectos. En la figura 2.5 podemos ver el efecto 
de cada uno por separado en Explorer™ junto con los valores empleados en cada caso. 
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Figura 2.5. Con los nuevos atributos de la etiqueta <hr> podemos controlar el ancho, 
grosor alineamiento y sombra de la linea horizontal. 
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La etiqueta <blockquote>... </blockquote> 

Otra etiqueta relacionada con el formato de parrafos en HTML es <blockquote>, que consta de una instruccion 
de inicio y una de fin y que indica que el parrafo que encierra es un texto parafraseado. A1 usar esta etiqueta el 
navegador mostrara el texto en u nuevo parrafo con margenes a la izquierda y a la derecha. En la figura 2.6 puede 
verse un uso tfpico de esta etiqueta. 

No abusar de las lmeas horizontales 

Es conveniente no usar mucho las lfneas horizontales, limitandolas al comienzo y fin de la pagina. La 
razon de esto es que las lfneas en medio de la pagina dificultan la lectura de esta. Si se desea separar 
secciones un espacio vertical del tamano adecuado es mas efectivo. 

Figura 2.6. La etiqueta <blockquote> es usada para insertar bloques de texto que citan 
a otro autor. Los navegadores suelen introducir un sangrado en este texto. 


1 El Ejemplo de uso de BLOCKQUOTE - Microsoft Internet Explorer .. 
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Ejemplo de uso de <BLOCKQUOTE> 

Mi poema favonto es aquel de Federico Garcia Lorca que reza: 

Mi corazon, como una sierpe 
se ha desprendido de su piel, 
y aqui la miro entre mis dedos 
llena de heridas y de miel 

| 

■ ■■■■ M * 



Que se corresponde con el codigo: 


Mi poema favopito es aquel de Federico Garcia Lorca que reza: 
<blockquote> 

Mi corazon, como una sierpe<br> 
se ha desprendido de su piel,<br> 
y aqui la miro entre mis dedos<br> 
llena de heridas y de miel<br> 

</bloekquote> 


La etiqueta <address>... </address> 
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Muy relacionada con la anterior, es la etiqueta <address>, que en ingles significa direction. Esta etiqueta esta 
compuesta, igualmente, por dos instrucciones y se usa para incluir informacion sobre el autor de una pagina WEB 
o elementos relacionados. Puede encontrarse un ejemplo de su uso en las coletillas existentes al final de muchas 
paginas en las que se incluye informacion variada para el usuario como puede ser, ademas del autor, la fecha de la 
ultima modification, la fecha actual, la URL de la pagina, etc. como se muestra en la figura 2.7. 

Figura 2.7. En esta pagina se observa como al final de la pagina se han incluido datos de 
los autores y de la pagina. Para ello se ha usado la etiqueta <address>. 



La etiqueta <center>... </center> 

Acabamos de ver una serie de etiquetas que permiten cambiar de lfnea, crear distintos tipos de parrafos o insertar 
lrneas que les separen. Tambien hemos visto que alguna de las etiquetas utilizadas tienen el atributo ’align’ que 
permite indicar el alineamiento. 

En ocasiones puede ser muy util indicar que algun texto, imagen o algun otro elemento de la pagina debfa ser 
centrado. Sin embargo no todas las etiquetas tienen el atributo ’align’. La solution es emplear una nueva etiqueta: 
center. Esta esta compuesta por una instruction de initio y una de fin de manera que todo lo que quedaba entre 
ellas, fuese lo que fuese, estuviese centrado. Por ejemplo en el ejemplo del verso de Lorca podemos centrarlo 
escribiendo: 


Mi poeraa favorito es aquel de Federico Garcia Lorca que reza: 
<center> 
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<blockquote> 

Mi corazon, como una sierpe <br> 
se ha desprendido de su piel,<br> 
y aqui la miro entre mis dedos<br> 
llena de heridas y de miel <br> 
</blockquote> 

</center> 


Y el resultado obtenido hubiese sido el de la figura 2.8 

Figura 2.8. Con la etiqueta <center> es posible centrar cualquier elemento de nuestra 
pagina como por ejemplo el verso de Lorca de la figura 2.6. 



Nota 

Actualmente existen alternativas mejores que la etiqueta center para especificar el alineamiento. En 
particular la etiqueta div y las hojas de estilo en cascada que seran tratadas a lo largo de este curso. 

Como insertar imageries en una pagina. 

En el cuarto capitulo de la obra trataremos con detalle el mundo de las imagenes en el WWW y aprenderemos 
todas las posibilidades graficas que ofrece. En este capitulo aprenderemos, como introduction, a insertar imagenes 
para dar mas vida a nuestra pagina. 

La etiqueta usada para insertar imagenes es: <img >. Esta etiqueta esta compuesta por una unica instruction y 
por tanto </img> no existe y su uso esta prohibido. Podemos insertar una imagen en medio de una frase como si 
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fuese una palabra mas de ella y sera mostrada por el navegador a continuation del texto (o cualquier otro elemento 
anterior) como podemos ver en el ejemplo de la figura 2.9. 

Figura 2.9. A1 insertar una imagen esta se entremezcla con el texto. Cuando la imagen es 
pequena se crean interesantes efectos como este. 



En ella se puede observar como hemos insertado una flecha en medio de la frase y despues de la imagen hemos 
seguido escribiendo. Aunque podemos crear este efecto con imagenes de todos los tamanos no es recomendable 
hacerlo con aquellas que tengan una altura mucho mayor que la del texto. 

Para insertar una imagen en una pagina WEB necesitamos tenerla en un archivo aparte. Existen multitud de 
formatos para almacenar una imagen en un archivo: BMP, GIF, JPEG, XPM, XBM, PNG, TIFF, etc. cada uno de 
los cuales tienen unas caracterfsticas. El formato elegido en el World Wide Web es el formato GIF que distingue 
a sus archivos porque tienen la termination “.gif’. Podnamos decir que todos los navegadores son capaces de 
mostrar las imagenes incluidas en este formato. Los navegadores en modo texto suelen proporcionar metodos 
para ver las imagenes usando algun programa visor externo. Un segundo formato que se ha introducido en el 
WWW y que es soportado por la gran mayorfa de los navegadores (incluyendo al Explorer™ y al Navigator ™) 
es el JPEG. Este formato es especialmente util para las fotos ya que es capaz de comprimir este tipo de imagen de 
manera que ocupen hasta 4 veces menos que las imagenes con formato GIF. Los archivos que contienen imagenes 
con formato JPEG suelen tener la termination “.jpg”. 

Una vez tenemos la imagen en un archivo aparte es hora de escribir el codigo HTML que nos permitira insertarla 
en la pagina. Como hemos comentado usamos la etiqueta <img> y para indicar el nombre del archivo usamos el 
atributo ’src’. En el ejemplo de la figura 2.9 el codigo usado para insertar la flecha es: 


Pulsa en la flecha <img 
src="flechal.gif ,l > para pasafc a la 
pagina siguiente. 


Como crear enlaces hipertexto. 

Una vez visto como introducir distintos tipos de texto y parrafos asf como insertar imagenes en una pagina, lo unico 
que queda por aprender para ser capaces de crear una pagina Web bastante completa son los enlaces hipertexto. 
Con ellos se pueden activar frases o palabras de la pagina para que al pulsar sobre ellas se salte a cualquier otra 
pagina de Internet que decidamos. 

Estos enlaces hipertexto (en ingles links) no son mas que unas zonas (habitualmente palabras o frases) especiales 
de nuestro texto que ofrecen la posibilidad de pulsar sobre ellas para ir a otras paginas. El concepto del hipertexto 


IT 
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no es nuevo, la mayorfa de los lectores lo habran usado ya en la ayuda de Windows™ o en otros muchos sistemas, 
lo realmente novedoso que ofrecen estos enlaces en el WWW es la posibilidad de pulsar y navegar hasta paginas 
que se encuentren en el otro extremo de la tierra. El navegante puede moverse de Espana a Japon con una unica 
pulsacion sobre el texto adecuado. En seguida se vera lo sencillo que es incluir esta impresionante tecnologfa en 
una pagina web. 

Los enlaces pueden clasificarse en dos tipos, los internos o locales y los externos: 


1. Los enlaces internos son aquellos que enlazan las paginas que componen un mismo sitio web (web site). 
Todas estas paginas estaran (generalmente) en el mismo servidor WWW, y por tanto estaran tambien en el 
mismo ordenador. Por esta razon solo sera necesario indicar en nuestro codigo el nombre del archivo donde 
esta la pagina que queremos enlazar y el directorio en el que se encuentra. Un ejemplo direccion de un enlace 
interno es: 

/hobbies/index.html 

2. Los enlaces externos permiten saltar desde una pagina hasta otra puede estar en cualquier otro lugar del 
mundo en otro servidor web. A1 crear estos enlaces es necesario especificar la direccion completa de Internet 
(la URL) de la pagina que queremos enlazar. Por ejemplo: 

http: //www. otroservidor. com/hobbies/index .htpftl.. 


Por ultimo, cabe resaltar que aunque la mayorfa de las veces los links se usan para enlazar una paginas con otras 
tambien pueden usarse con imagenes, sonido, video y practicamente cualquier tipo de fichero. 

La etiqueta <a>... </a> 

Esta etiqueta, de nombre sencillo, es la que va a permitir incluir en las paginas enlaces hipertexto. Su atributo 
’href’ permite indicar cual es la pagina a la que debe saltar el usuario al pulsar sobre el texto adecuado. El texto 
del enlace sera aquel que se introduzca entre la instruccion de inicio y la instruccion de final de la etiqueta y debe 
ser resaltado por el navegador para que el usuario sepa que puede pulsar en el. La estructura de un link es: 


<a href="direcci6n_URL"> 

Texto que sera sensible (hipertexto) 
</a> 


Los navegadores graficos como Netscape Navigator ™y Microsoft Internet Explorer ™ resaltan este texto 
mostrandolo de un color diferente y subrayandolo, ademas el cursor cambiara al situarlo sobre el texto. Los 
navegadores que funcionan en modo texto como Lynx™ resaltan los enlaces hipertexto cambiando el color del 
texto y de su fondo. 

Veamos un ejemplo sencillo del uso de enlaces. Se ha creado un sitio web personal con 2 paginas. La pagina 
principal se encuentra en el archivo index. html y se quiere que en ella haya un enlace a otra pagina donde se 
han escrito sobre los hobbies del creador del sitio web y que se encuentra en el archivo hobbies. html. El enlace 
podrfa ser algo asf: 

Tambien puedes conocer mis <a 
href ="hobbies .html">hobbies</a> 


“33“ 
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El resultado es el que puede apreciarse en la figura 2.10 donde la palabra hobbies aparece resaltada. 

Figura 2.10. A1 pulsar sobre un enlace hipertexto saltaremos a otra pagina de Internet. 
Los navegadores resaltan estos enlaces para que sea facil identificarlos. 
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Aviso 

Si no funciona un link conviene comprobar la sintaxis del codigo HTML. Un error comun es no cerrar 
las comillas que tras poner la direction de la pagina enlazada. Si se comete este error, ademas de no 
funcionar el enlace, es posible que desaparezcan otros elementos de la pagina al visualizarla. 

Paginas en otros directorios 

Si la pagina a la que queremos crear el enlace no se encuentra en el mismo directorio que la actual es necesario 
indicar el directorio (o ruta de directorios, path) donde esta. Si en el ejemplo anterior la pagina hobbies.html 
estuviese en el directorio varios el ejemplo anterior deberfa sustituirse por: 


Tambien puedes conocer mis 
<a href="varios/hobbies.html">hobbies</a> 


Como vemos, para separar el nombre del directorio del nombre del archivo se usa el slmbolo "/". Tambien se 
usana, si fuese necesario, para separar varios directorios. 

Enlaces externos 

La verdadera fuerza de Internet estriba en la posibilidad de navegar con una sola pulsation por information que 
se encuentre en cualquier lugar del mundo. Para convertir esto en realidad existen los enlaces externos. 

Nota 

Algunos disenadores web recomiendan que no se creen enlaces externos desde la pagina principal o home 
page de nuestro sitio Web para no incitar al visitante a que se vaya de la pagina. 

La creation de uno de estos enlaces es muy similar a la creation de los enlaces locales. El unico cambio radica 
en que el valor dado al atributo ’href’ es la direction completa de Internet, sea otra pagina web, una imagen o 


















La primera pagina Web 


cualquier otro archivo. Por ejemplo, para incluir un enlace desde cualquier pagina a la de DMOZ (Open Directory 
Project ). Para ello puede emplearse: 


Enlace a <a href="http://www. dmoz . or^,^C>4cectoflo DMOZ</a> 

Asi de facil. Para referirse a un archivo especifico del servidor de DMOZ™ hay que especificar la ruta de 
directorios y el nombre del archivo. Un ejemplo de uso podria consistir en construir un enlace a la seccion 
sobre Internet de este buscador. Para ello hay que incluir el siguiente link: 


href="http://www.dmoz.org/Computers/Internet/"> 
Seccion de Internet de DMOZ </a> 


Un aspecto destacable de este ejemplo es que se ha especificado la ruta de directorios pero no el nombre del 
archivo. Con ello se consigue acceder al archivo por defecto de ese directorio. Todos los servidores web tienen 
un archivo por defecto de manera que si no se introduce el nombre ninguno ese archivo sera el mostrado. En la 
mayorfa de servidores el nombre elegido es index. html por lo que la direccion usada antes serfa equivalente a: 


http://www.yahoo.com/computers/internet/index, html 


Nota 

Si un sitio Web consta de varias paginas es usual incluir todos los enlaces extemos en una pagina especial 
dedicada a ellos como la que se muestra en la figura 2.11. 
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Figura 2.11. Pagina que agrupa todos los enlaces de un sitio web 
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En esta primera practica de la obra se propone crear un sitio Web REAL poniendo en practica los conocimientos 
adquiridos hasta ahora. En el incluiremos imageries, varios titulares parrafos de texto de distinto tipo y enlaces 
hipertexto a otras paginas. 

En la figura 2.12 se muestra una captura de un navegador visitando la pagina tal y como debe quedar al final. Se 
propone al lector intentar imitar la apariencia de esta pagina usando unicamente las etiquetas HTML explicadas 
hasta ahora. 
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Figura 2.12. La practica 1 propone realizar un pagina a partir de lo mostrado en esta 
figura. 


La chistera - Humor y magia - Microsoft Internet Explorer 
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LA CHISTERA - Hume 


Quienes somos 

La chistera es un grupo de artistas de die ados al mundo de la magia, la comedia y el e 
encontrar humoristas, magos, showmen, etc. 

Si usted o su empresa necesita crear un espectaculo y no quiere quedar decepcionad' 
MISMO. Nuestra direccion es: 

chistera@chistera.es 

Un ejemplo de nuestro repertorio 

Cada diale mostramos ejemplos distintos de nuestro amplisimo y novedoso repertori 

Era un tio tan gafe, tan gafe, que se sento en un pajar y se clavo la aguja. 

Doctor, Doctor, icuanto tiempo me que da de vida? 

5 ... 4 ... 3 ... 2 ... 

Enlaces a paginas relacionadas 

jA Reirse Toca, jJa, ja, ia! : Si te aburres, estas deprimido, o simplemente quieres reii 
d e los mas d e 110 chist e s qu e ti e n§ 9 j Con posibi lidad de enviar tu el tuyo! 

ler Concurso de feos por Internet : ler Concurso de Feos por Internet participa y gaj 
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Para empezar a realizar la pagina debe abrirse un editor de textos o de HTML (es indiferente). Algunos ejemplos de 
programas que pueden servir son notepad™, emacs™, vi™, HomeSite™, etc. Una vez abierto se puede empezar 
a escribir la pagina tal y como se ha explicado, comenzando por la cabecera y siguiendo con el resto de la pagina. 
A continuacion se muestran las primeras lrneas que podrfa contener el archivo a modo de elemplo: 


<head> 

La - Humor y magia 

</title> 

</head> 

<body> 


Tras escribir el codigo debe guardarse con termination “.html” y ya esta lista para ser visualizada con cualquier 
navegador. Tras abrir este hay que seleccionar la option Archivo/Abrir...Examinar... (o similar) y elegir el archivo 
en el que habfamos guardado la pagina. En ese momento debe mostrarse en pantalla la pagina creada. Lo habitual 
es tener que realizar cambios en el codigo HTML, volver al navegador, volver a hacer cambios y asi hasta que se 
obtiene el resultado deseado. jsuerte! 

La solucion 

En esta primera practica se va a mostrar a continuacion el codigo completo de la pagina resultado. Por supuesto, 
conviene intentarlo antes de mirarlo. Tambien hay que tener en cuenta que no hay un unico resultado y es posible 
que un codigo ligeramente diferente de lugar a una pagina practicamente identica al verla con el navegador. 


<html> 

<head> 

La chistera - Humor y magia 
</t$fi9ie> 

</head> 

<body> 

<center> 

<hl> 

<img src="imagenes/chistera.gif"> 

LA CHISTERA - Humor y magia 

’ 

</center> 

<K2> 

Quienes somos 
</h2> 

<p>La ch i stera es iuy'qrupo de artistas 

dedicados al mundo de la magia, la comedia y el espectaculo. 
Entre nosotros podras encortfjjvar humoristas, magos, showmen, 

<p>Si usted o su empresa necesita crear 

un espectaculo y no quiere quedar decepcionado no dude en 
escribirnos AHORAMISMO. Nuestra direccion es:</p> 

<center> 

chistera@chistera.es 
</center> 

<h2> 

Un ejemplo de nuestro reperto^io 
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</h2> 

<p>Cada dia le mostramos ejemplos 

distintos de nuestro amplisimo y novedoso repertorio de chistes: 
<blockquote> 

Era,-aii. tan gafe, tan gafe, que se sento en un pajar y se 
clavo la aguja. 

</blockquote> 

<blockquote> 

Doctor, Doctor, ^cuanto tiempo me queda de vida? 

5... 4... 3... 2... 

</blockquote> 

</p> 

<h2> 

Enlaces a paginas relacionadas 
</h2> 

<p> 

<a href="http://www.ciudadfutura.com/areirse 
">;A Reirse Toca, jJa, ja, ja! 

</a>: Si te aburres, estas deprimido, 

o siaplemente quieres reir, pasate por ,;||£j pagina y disf rut ; aEa.s. 
de los mas de 110 chistes que tiene. ;Con posibilidad de enviayjt 
tu el tuyo! 

<p> 


href="http://www.geocities.cpm/BourbonStreet/Delta/3543/" 
>ler Concurso de feos por 
Internet</a>: ler Concurso de Feos por 
Internet pa^pjcipa y gana. tu premio. </p> 

<P> 


href="http: / /www.geocities .eCDJt/SBllywood/8620">Albert 
Gran's Web</a> 

: En esta pagina encontraris un listado de dichos 
populares, y las 50 cosas que se deberian cambiar para mejorar 
la vida Lorried a de nuestro querido planeta Tierra 

</p> 

<hr size="5"> 

<address> 

Pagina creada por el equipo de programacion Web de LA CHISTERA 
<br> Ultima actualisacion: 32-12-1997 ;-) 

</address> 

</body> 

</html> 


Nota 

Una vez hemos comprobado que con nuestro navegador habitual la pagina es mostrada correctamente 
conviene probarla con otros incluyendo alguno en modo texto (Lynx) y diferentes tamanos de pantalla. 

A veces las diferencias seran sorprendentes. 

Anclas 

Despues de realizar nuestra primera practica continuamos los enlaces hipertexto con unos elementos muy 
relacionados con ellos: las anclas, que nos permitiran crear enlaces especificando a que lugar concreto de una 
pagina queremos saltar. 







La primera pagina Web 


cQue es un ancla? 

Un enlace normal tiene la estructura que podemos ver en la figura 2.13. 

Figura 2.13. Estructura de los enlaces normales. A1 pulsar sobre el texto activo no 
podemos elegir el lugar de la pagina al que saltamos, iremos siempre al comienzo. 


Index.htm 


Links, htr 



Desde una pagina cualquiera y en cualquier lugar de ella se escribe el codigo para crear un enlace. Cuando se 
pulsa sobre el texto activo se salta al comienzo de otra pagina, tal y como indica la flecha. Usando enlaces a anclas 
se puede cambiar este comportamiento. 

Un ancla es una marca que se situa en un punto deteiminado de una pagina. Posteriormente se podra crear un 
enlace a ese ancla de manera que al pulsar sobre el texto apropiado en vez de saltar a otra pagina se salta al lugar 
donde este el ancla, es decir, ya no se va al comienzo de la pagina como con los enlaces vistos hasta ahora. Dicho 
de otra forma usando anclas es posible que un enlace apunte al lugar concreto de una pagina que se desee. 

Creando anclas 

Para crear anclas usamos, al igual que para crear enlaces, la etiqueta <a>, sin embargo no debe confundirse el 
lector porque aunque ambos elementos esten relacionados y se use la misma etiqueta para crearlos las funciones 
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de cada uno son radicalmente diferentes. Las anclas solo son marcas y son invisibles cuando visualizamos la 
pagina con el navegador. Por esta razon las anclas no definen ningun texto activo. 

A pesar de ello es habitual encontrar texto entre las instrucciones de inicio y de fin como en el siguiente ejemplo: 

<a name="nombreAncla">Comienzo</a> 


Este texto no tiene ningun significado especial y sera interpretado por los navegadores de igual forma que el texto 
de alrededor. 

Como se ha adelantado en el ejemplo anterior, al crear anclas no se emplea el atributo ’href’. En su lugar se usa 
otro llamado ’name’. Con este atributo se da un nombre al ancla que luego nos servira para referirse a ella. 

Un ejemplo donde la utilidad de las anclas se hace evidente es en aquellas paginas en las que nos encontramos 
una lista ordenada alfabeticamente. Si la lista es muy larga moverse hasta la letra S, por ejemplo puede hacerse 
molesto. Pero usando anclas el autor de la pagina puede incluir todas las letras al principio de manera que si 
se pulsa sobre una letra se salta al lugar de la lista donde empiecen las entradas de la letra S. En la figura 2.14 
podemos ver un ejemplo real capturado de la pagina del buscador espanol OZU ™. 
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Figura 2.14. En la seccion superior puede verse ver una serie de enlaces (las letras 
mayusculas) a anclas. En la seccion superior se muestra el lugar al que se ha saltado 
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al pulsar sobre la letra S. Podemos deducir que antes de la palabra Salud hay un ancla. 



Anadir Ay 
E-Mail Favc 


A-B-C-D-E-F-G-H-I-J-L-M-N-O-P-^-R-S-T-] 

• Academias 

• Acuaticos 

• Aereos 

• Agendas de Viajes 

• Agrupaciones Nacionales 

1.. .~.r~... j'; j.[arMi'pc. 

Direccion jll #S ." 

• Salud 

• Santa Claus 

• Seguridad 

• Seguros 

• Semana Santa 

• Sexologia 

• Software 

• Somdos 
Inicio 



• Tabaco 

• Teatro 

• Tele c omunic acione s 

i... ,...* r.r" i.'irMipc 
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En este caso se detallan todas las secciones del Web ordenadas alfabeticamente. A1 principio de la pagina hay un 
listado con todas las letras del abecedario de manera que al pulsar sobre una letra vas al lugar de la pagina donde 
estan las secciones que empiezan con esa letra. ^Como se hace esto? Es muy sencillo, el proceso consta de dos 
pasos: 

1. Primero hay que insertar el ancla en el lugar de la pagina donde se quiere poder saltar. Tomando como 
ejemplo una una pagina web que contiene un diccionario se empleana el siguiente codigo: 


Salud 

Santa Claus 
Seguridad 


2. En segundo lugar se crea un enlace al principio de la pagina un que apunte al ancla. En este ejemplo el codigo 
usado es: 


En este ejemplo al pulsar sobre la letra S se salta directamente al lugar de la pagina donde se encuentra la palabra 
salud, que es la primera de las que comienzan con “S”, que es el efecto deseado. Para especificar que el enlace 
apunta a un ancla se ha incluido un signo # seguido del nombre del ancla. 

La estructura de un enlace a un ancla que se encuentre en la misma pagina como el de este ejemplo es la que puede 
verse en la figura 2.15. 




La primera pagina Web 


Figura 2.15. Estructura de un enlace a un ancla de la misma pagina. Cuando pulsamos 
sobre el enlace el navegador nos transporta hasta el lugar de la pagina donde esta el ancla. 



En ella hemos usado un dibujo de un ancla para senalar donde existe un ancla, en un documento real en realidad 
no existe ningun elemento visual que la identifique, tal y como hemos visto en el ejemplo de OZU™. 

Enlaces a anclas de otras paginas 

Tambien es posible crear un enlace a un ancla de otra pagina. Para ello hay que incluir la pagina, bien sea mediante 
su direccion URL o mediante su ruta de directories, y posteriormente poner el sfmbolo “#” seguido del nombre 
del ancla. En este caso es obligatorio poner el nombre del archivo, aunque sea index.html. Siguiendo con el 
ejemplo anterior para crear un enlace a los terminos que empiezan por ’S’ de la pagina donde se situo el ancla 
puede emplearse el siguiente codigo: 


<a href="http://www.ozu.es/a-z.html#S">Letra S</a> 


Suponiendo que el diccionario estaba en un archivo llamado a-z .html en el servidor de nombre www.ozu.es 
[http://www.ozu.es]. 

La estructura de los enlaces es ligeramente mas complicada que los anteriores. Para crearlos hay que seguir los 
siguientes pasos: 
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1. Se parte de un ancla existente en otra pagina o se crea uno 

2. Se crea un enlace a esa pagina 

3. Se anade a la direccion del enlace el srmbolo ’#’ seguido del nombre del ancla 

En primer lugar deberemos crear un ancla en la pagina objetivo. Despues deberemos escribir el enlace con la 
sintaxis explicada anteriormente indicando el nombre de la pagina y el nombre del ancla. La flecha de la figura 
2.16 nos indica el salto que se producira al pulsar sobre el enlace. Ya no iremos al comienzo de la pagina como 
pasaba con los enlaces normales sino que iremos al lugar concreto que hemos elegido (y donde hay un ancla). 

Figura 2.16. Estructura de un enlace a un ancla de otra pagina. Cuando pulsamos sobre 
el enlace vamos hasta otra pagina, pero no al comienzo sino al lugar concreto donde esta 
el ancla. 


Index.htm 




LINK a ancla de links, htm 















































La primera pagina Web 


Sugerencia 

Aunque pueden crearse enlaces a anclas que se encuentren en paginas creadas por otros, no es posible 
modificar las anclas existentes o anadir anclas nuevas con lo que debemos confiar que el autor haya 
puesto una donde interese. Para averiguar si es asf se puede revisar el codigo de dicha pagina buscando 
una cadena de la forma <a name=" Hay que tener cuidado con este tipo de enlaces porque el 

autor de la otra pagina puede decidir quitar el ancla y todos los enlaces que hagan referenda a ella 
quedaran inutilizados. 

Uso de enlace y ancla en la misma etiqueta 

Hasta ahora hemos visto el uso de la etiqueta <a . .. >..</a%gt ; de dos maneras diferentes: para crear enlaces 
hipertexto o para crear anclas. En el primero de los casos se usaba el atributo ’href’ para especificar la pagina que 
se querfas enlazar. En el segundo caso, al crear el ancla, se usaba el atributo ’name’ para darle un nombre con el 
que poder identificarle. Pero /que ocurre si usamos los dos atributos a la vez?, /Esta permitido? La respuesta es 
SI. En ese caso se estara creando ambas cosas a la vez un enlace o un ancla. Por ejemplo: 


<a href="http://es.gnome.org" name="enlace_gnome_hispano"> 

GNOME Hispano 

</a> 


En este caso al pulsar sobre la palabra ’GNOME Hispano’ se salta a la pagina de GNOME Hispano. Y por otro 
lado se puede acceder al lugar de la pagina donde esta este enlace creando una referenda al ancla denominada 
’enlace_gnome_hispano’. Es decir, la lfnea anterior es equivalente a poner las dos siguientes: 


<a name="enlace_gnome_hispano"> 
<a href<s?http: //es . gnome . org"> 
GNOME Hispano 


Todavfa puede plantearse otra pregunta: /.para que puede servir un enlace-ancla? Esta pregunta tiene mucha logica 
porque para lo unico que sirve un ancla es para crear un enlace a ella. En el ejemplo anterior se podrfas escribir 
en algun otro lugar de la pagina: 


<a href="#enlace_gnome_Jiispano"> 
pagina de GNOME Hispano</a> 


Pero /por que no poner directamente?: 


<a href="http://es.gnome.org"> 
pagina de GNOME Hispano™ 


Parece mas logico y asf no se forza al visitante de la pagina a dar dos pasos en vez de uno. Sin embargo puede 
encontrar casos en que el enlace-ancla puede ser conveniente. Por ejemplo, puede ocurrir que se desee poner 
un enlace a la pagina de GNOME Hispano desde una pagina principal. Pero tambien se quiere hacer caso al 
consejo de ciertos disenadores web experimentados de no poner enlaces externos en ella. /Como solucionarlo? 
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Seguramente el lector ya lo sabra: se puede tener una pagina especial con todos los enlaces extemos llamada por 
ejemplo links .html donde estuviese el enlace-ancla anterior. Entonces desde la pagina principal se escribirfa: 


<a hrefjs^links .html#enlace_gnome_hispano"> 
GNOME Hispano</a> 


Con lo que ademas hemos conseguido que el usuario visite otra de nuestras paginas, que en definitiva es uno de 
los objetivos de todo programador Web: que sus paginas sean vistas. 

El atributo ’title’ 

El lenguaje HTML define, ademas de los vistos, otro atributo interesante para la etiqueta <a>..</a>: ’title’. Con 
este atributo puede escribirse un tftulo o una descripcion breve del link. Los navegadores pueden mostrar esta 
informacion al usuario de varias maneras: 


• En un margen de la pantalla o mediante una caja de texto (en ocasiones llamadas bocadillos ) que aparezca 
cuando se situen el raton encima de la zona activa del link. Este es el metodo usado por Explorer ™. 

• Cuando el link ya ha sido pulsado y se este esperando recibir la pagina puede mostrarse como texto de espera 
o anticipo a lo que va a llegar. 

• Leyendo el texto (con un sintetizador de voz) cuando se selecciona o se pasa por encima 
•etc. 


Nota 

No es habitual encontrar el atributo ’title’ en muchas paginas, quiza porque Netscape™ ha decidido 
ignorarlo y sus usuarios no veran la informacion que introduzcamos en el de ninguna manera. 

Para ver un ejemplo de su uso se utiliza la pagina titulada "La chistera - Humor y magia" realizada en la primera 
practica. En ella se cambia la lfnea de codigo: 


<p><a 

href="http://www.ciudadfutura.com/areirse 
;A Reirse Toca, ;Ja, ja, ja!</a> 

</p> 


Por esta otra con el atributo ’title’: 


<pxa 

href="http://www.ciudadfutura.com/areirse" 
title="Yo me rei mucho">;A Reirse Toca, ; Ja, 
ja, ja! </ax/p>. 


El resultado puede verse en la figura 2.17. Al pasar el cursor por encima del texto activo nos aparece un bocadillo 
con el texto del atributo ’title’. 
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Figura 2.17. Con el atributo ’title’ podemos incluir informacion adicional sobre el Link. 
Explorer™ mostrara esta informacion con un bocadillo. 


Q La chistera - Humor y magia - Microsoft Internet Explorer 


Archivo Edicion Ver Ir a favoritos Ayuda 


1 


-m © m ^ © m 0 § i a 


5 ... 4 3 ... 2 .. 


Enlaces a paginas relacionadas 


jAReirse Toca, jJajja, jaJ : Site aburres, estas deprimido, o simplemente quieres rei 
4s w In 


pagina y disfirutaras 


Hp 110 chistes que tiene. jCon posibilidad de enviar t 
ef mucho| 


■ Bocadillo 


ler Concurso de feos por Internet : lerConcurso de Feos por Internet participa y ^ 


Albert Grau's Web : En esta pagina encontraras un listado de dichos populares, y las 
deberian cambiar para mejorar la vida terricola de nuestro querido planeta Tierra 


Pagina creada por si squipo ds programacion Wsh ds LA CHISTERA 

■t\ http: //www.ciudadfutur 


Sugerencia 

Es aconsejable usar ’title’ siempre. De esta manera aquellos usuarios (que visiten la pagina) con 
navegadores que entiendan este atributo (como Explorer™) disfrutaran de una informacion extra y los 
que usen otros navegadores que no lo entiendan (como Netscape) se quedaran como si no hubieramos 
incluido dicha informacion, pero en ningun caso saldran perjudicados. 

Los atributos ’rel’ y ’rev’ 

Antes de terminar con la etiqueta <a> ...</a> es conveniente comentar algunos atributos mas que completan su 
repertorio y que no han sido mencionados hasta ahora porque no son muy usados. 

Entre estos destacan ’rel’ y ’rev’ porque en los ultimos estandares de HTML en los que han trabajado conjunta- 
mente Microsoft™, Netscape™ y muchas otras companfas y organizaciones, se les ha dado mayor importancia 
de la que tienen actualmente. 
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Estos atributos fueron creados para establecer relaciones entre las paginas enlazadas entre si. Sin embargo no se 
ha especificado todavia para que pueden servir estas relaciones. ’rel’ y ’rev’ solo existen con vistas a que en un 
futuro se les de algun uso. El nombre ’rel’ proviene de la palabra inglesa relation (relacion) mientras que ’rev’ 
proviene de REVerse relation (relacion inversa). 

Un ejemplo podria consistir en un libro publicado en Internet donde cada capitulo se ha escrito en una pagina 
(capitulol.html, capituio2.html, etc.) Puede ser interesante establecer una relacion entre cada una de las 
paginas. Asi en el capitulo 4 se podria emplear lo siguiente: 


<a href="capitulo3.html" 
rel=*:%nterior">Capitulo 3 
</a> 

<a href="capitulo5.html" rel="siguiente"> 

Capitulo 5</a> 

Es decir el capitulo 3 se relaciona con el actual (el cuarto) en que es el anterior y el 5 en que es el siguiente. Un 
posible uso (futuro) que podria darse a este tipo de relaciones podria ser con vistas a imprimir el libro completo. 

El atributo ’rev’ establece la misma relacion que ’rel’ pero a la inversa. En el ejemplo anterior hubiese sido 
equivalente escribir: 


<a href="capitulo3.html" rev="anterior"> 

Capitulo 3 
</a> 

<a href="capitulo5.html" rev="siguiente"> 

Capitulo 5</a> 

El capitulo actual es el siguiente al tercero y el anterior al quinto. 

Por ultimo, para terminar por completo la etiqueta < a>...</a>, solo nos queda comentar dos atributos: ’urn’ 
y ’methods’. Estos dos atributos existian en los origenes del lenguaje HTML pero fueron eliminados por su 
poca utilidad. Los mencionamos unicamente para que el lector no se extrane si los ve en alguna pagina, pero no 
recomendamos su uso. 
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Formato de texto y Caracteres 
especiales 

Jorge Ferrer 
Victor Garcia 

Version 1.0 

Copyright Jorge Ferrer y Victor Garcia. Se otorga permiso para copiar, distribuir y/o modificar este docu- 
mento bajo los terminos de la Licencia de Documentacion Libre GNU, Version 1.1 o cualquier otra ver¬ 
sion posterior publicada por la Free Software Foundation. Puede consultar una copia de la licencia en: 
http://www.gnu.org/copyleft/fdl.html 

Ha llegado el momento de estudiar todas las posibilidades que ofrece el lenguaje HTML para dar formato al texto 
e insertar caracteres especiales, pasando por la insertion de texto preformateado. 

En la pagina creada en el capitulo anterior se pusieron en practica todos los conocimientos del lenguaje HTML 
adquiridos hasta el momento, que no son pocos. Sin embargo un aspecto que no se le habra pasado por alto al 
lector es la falta entre el texto de palabras en negrita, en cursiva, con distintos tipos de letra, etc. En definitiva, 
se echa de menos la falta de texto con diferentes formatos. En este capitulo se aprenderan las posibilidades que 
nos ofrece el lenguaje de creation de paginas Web a este respecto. Tambien se vera como crear un nuevo estilo 
de parrafos, compuesto por texto preformateado, es decir texto en el que se respetaran los espacios, tabulados y 
saltos de linea que se inserten. 

Formato de texto 

El lenguaje HTML permite dar varios tipos de formatos al texto de nuestras paginas. Para ello usa una serie de 
etiquetas, compuestas todas por una instruction de inicio y otra de fin, que realizan efectos o formatos diversos 
en el texto que encierran. Estas etiquetas se dividen en dos grupos: las etiquetas de estilo logico y las etiquetas de 
estilo fisico. 

Etiquetas de estilo fisico 

Las etiquetas de estilo fisico son aquellas que especifican exactamente como debe ser formateado el texto que 
modifican. Es decir, una etiqueta de estilo fisico es aquella que dice: 'este texto debe estar en negrita’ sin mas, no 
ofrece al navegador otra posible forma de mostrar ese texto. Este tipo de etiquetas contradice el espiritu descriptivo 
que debe tener el HTML, por lo que son muy criticados por los puristas de este lenguaje. Estos puristas sugieren 
que las etiquetas de estilo fisico sean sustituidas por las de estilo logico que se veran en el siguiente apartado. A 
pesar de todo las etiquetas de estilo fisico son de uso comun y por ello las trataremos en detalle. 

En la figura 3.1 se muestran ver ejemplos de las etiquetas de este tipo mas usadas 
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Figura 3.1. Con el tipo de letra Times New Roman no todas las letras ocupan lo mismo. 


Estilos fisicos - Microsoft Internet Explorer 


Archive Edicion Ver }r a Favorites Ayuda 
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Estilos fisicos 


<B>...</B>: Negrita 

Desde esta pagrna puedes bajarte la ultima version de nuestro programa grati; 
<I>.Cursiva 

El ultimo libro que me he leido es El medico 

<TT>...</TT>: Teletipo 

Para obtener un listado de todas tus paginas Web en EOSflX deberas escribir: 

<STRIKE>...</STRIKE>: Texto tachado 
Yo CASI NUNCA me equivoco 
<BIG>...</BIG>:Tamano grande 

Esto es texto normal, este es grande y CSte 6S ITiayOI 
<SMALL>...</SMALL>:Tamano pequeno 

Esto es texto normal, este es pequeno yest* es manor 
<SUB>...</SUB> y <SIJP>...</SlJP>:Submdices y supenndices 
El l er componente quimico que estudiamos fue el agua o H^O. 

<U>...</U>: Subray ado 

El pla^o limite para la entrega de solicitudes es el 15 de Jumo 


que son las que sirven para... 


1 Poner un texto en negrita: para ello se usa la etiqueta <b>..</b> como abreviatura de la palabra inglesa Bold 
que significa, precisamente, negrita. La manera de usar esta etiqueta es como cualquier otra compuesta por 
instruccion de inicio e instruccion de fin, es decir debe introducirse el texto sobre el que se quiere actuar entre 
ambas instrucciones. Su forma de uso es la siguiente: 
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<B>TEXTO EN NEGRITA</B> 

Por ejemplo podrfa usarse en la siguiente frase: 

D1 

Desde esta pagina puede adquijteflfx la ul£4roa version de 

nuestro programa 

<B> 

' gratis' 

</B> 


En la que la palabra ’ gratis ’ sera mostrada en negrita tal y como podemos ver en la figura 3.1. 

1 Poner un texto en cursiva: en este caso se usa la etiqueta <i>..</i > como abreviatura de la palabra inglesa 
Italics que significa cursiva. Su uso es muy similar al anterior. 


TEXTO EN CURSIVA 
</I> 


Esta etiqueta suele usarse para dar enfasis a alguna frase o texto pero sin que resalte demasiado. Otro uso 
comun es para dar un formato especial a palabras de otro idioma o a tftulos como por ejemplo: 

D1 

El ultimo libro que me he telco es 
<l> 

El medico 


En el que ’El medico’ sera mostrado con letra cursiva como vemos tambien en la figura 3.1 

1 Poner un texto con letras de tamano fijo: como el lector sabra existen diversos tipos de letra (llamadas fuentes) 
como Times New Roman, Arial,Courier New, etc. En algunos de estos tipos el tamano de las letras no esta 
prefijado y de esta manera la letra ’i’ no ocupa lo mismo que la letra’m’. Este es el caso de la fuente Times 
New Roman que es el usado por la mayorfa de los navegadores para mostrar el texto. En la figura 3.2 se 
muestra ver un ejemplo de este tipo de letra. 
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Figura 3.2. Con el tipo de letra Courier todas las letras ocupan lo mismo 
(monoespaciadas) 


Fuente: Times New Roman 


Tipo: Distinto espaciado para cada letra 


Muestra: 


11111 

ooooo 

mmmmm 


Sin embargo en ocasiones puede ser conveniente que el tamano de las letras este prefijado y que todas las letras 
ocupen lo mismo (tipo de letra monoespaciado ). En estas ocasiones se usa otro tipo de fuente, generalmente 
Courier New. En la figura 3.3 se observa ver la diferencia con el tipo de letra anterior. 

D1 

Figura 3.3. Los navegadores graficos como Explorer ™ pueden mostrar perfectamente 
todos los tipos de estilos logicos como vemos en esta figura. 


|Fuente: Courier new 

|Tipo: Igual espaciado para todas las letras 


Muestra: 


iiiii 

ooooo 


mmramm 


La etiqueta <tt>..</tt> que proviene del vocablo ingles TeleType, traducido al espanol TeleTipo, nos permite 
decirle al navegador que use un tipo de letra monoespaciado. Esta etiqueta es usada habitualmente para resaltar 
algun tipo de comando, codigo, nombre de archivo o similares. Por ejemplo: 


Para obtener un listado de todas tus paginas Web en UNIX 
deberas escrifrir: 

<TT> 

Is* .htm *.html 
</TT> 
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1 Tachar una palabra o frase: aunque no es muy comun en ocasiones puede ser conveniente que una 
palabra o frase aparezcan tachadas por una lfnea horizontal. La etiqueta de HTML que permite hacer 
esto es <strike>..</strike >, en ingles strike significa ’tachado’ (Tambien se puede usar la abreviatura 
<s>..</s>) En ocasiones se usa esta etiqueta para simular un texto borrado, por ejemplo: 


Yo 

<STRIKE> 

CAS I 

</STRIKE> 

NUNCA me equivoco 


Todas las etiquetas vistas hasta ahora tienen sus etiquetas de estilo logico equivalentes. A continuacion se muestran 
otras para las que no ocurre igual y que realmente se muestran a medio camino entre el estilo logico y el estilo 
fisico. 


1 Aumentar el tamano del texto : En ocasiones queremos resaltar una palabra o frase haciendo que este escrita 
con una letra de tamano mayor al texto adyacente. Para ello se usa la etiqueta <big>..< /big> con cual 
conseguimos un ligero aumento de tamano en el texto que es afectado por ella. Si queremos conseguir un 
aumento de tamano aun mayor podemos anidar varias de estas etiquetas como observamos en el ejemplo: 


Esto es texto normal, 
<BIG> 

este es grande 
<BIG> 


y este es mayor' 
</b:g> 


1 Reducir el tamano del texto: En otras ocasiones podemos pretender lo contrario: Hacer que una frase sea 
mas pequena que las anteriores. Para ello se usa la etiqueta SMALL que funciona de manera muy similar a la 
etiqueta BIG, como podemos ver en su ejemplo: 


Esto es texto normal, 
<SMALL> 

este es pequeno 

<SMALL> 

y este es menot 
</SMALL> 

</SMALL> 
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1 Poner subindices y superindices: existen dos etiquetas que permiten poner subindices y superindices en una 
pagina HTML. Estas etiquetas son sub y sup respectivamente. Veamos un ejemplo: 


El 1 


</SUP> 

componente quimico que estudiamos fue el agua o H 
<SUB> 

2 

</SUB>0. 


1 Y por ultimo, poner texto subray ado: el texto encerrado entre las instrucciones de inicio y fin de la etiqueta u se 
muestra simple. El nombre de la etiqueta proviene de la palabra inglesa Underline que significa precisamente 
subrayado. En general un texto se muestra subrayado para resaltar una informacion importante, por ejemplo: 


El plazo limite para la entrega de solicitudes es el 
<U> 

15 de Junid 
</U> 


En la figura 3.4 se pueden apreciar todos los ejemplos de estilos ffsicos tal y como son vistos con un navegador de 
texto (en concreto Lynx™). 
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Figura 3.4. El navegador Lynx™ solo puede mostrar texto y usa los medios a su alcance 
para formatear el texto que deberia ser negrita, cursiva... 


Estilos fisicos 

<B>... </ B>: Negrita 

Desde esta pagina puedes bajarte la ultima ver 
programa gratis 

<I>...</!>: Cursiva 

El ultimo libro que me he leido es El medico 
<TT>.■■</TT>: Teletipo 

Para obtener un listado de todas tus paginas IW 
deberas escribir: Is *.htm *.html 

<3TRIKB>. . ■<13TRIKE>; 1exto tachado 

Yo [DEL: CASI :DEL] NUNCA me equivoco 

<BIG>...</BIG>:Tamano grande 

Esto es texto normal, este es grande y este es 

<SMALL>...</SMALL>:Tamano pequeno 

Esto es texto normal, este es pequeno y este e; 

<SUB>...</SUB> y <SUP>...</SUP>:Subindices y superind: 

El ler componente quimico que estudiamos fue e. 

<U>...</U>: Subrayado 

El plazo limite para la entrega de solicitudes 
Junio 


Etiquetas de estilo logico 

En contraposicion con los estilos fisicos estan las etiquetas de estilo logico. Este tipo de etiquetas esta mucho mas 
en concordancia con la filosofia del lenguaje HTML y los puristas las recomiendan como sustitutos a las de estilo 
fisico. La funcion de estas etiquetas ya no sera decirle al navegador ’pon esto en negrita’ ni similares, sino que 
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simplemente describiran el texto, por ejemplo ’este texto es importante’, ’esto es un codigo’, etc. Usando esta 
description el navegador lo mostrara de la manera mas conveniente que en gran parte de los casos sera igual a si 
hubiesemos usado las etiquetas de estilo ffsico correspondientes. 

A1 igual que las anteriores, las etiquetas de estilo logico estan formadas por una instruction de inicio y otra de fin 
que encierran un texto. Las principales etiquetas de este tipo son las siguientes : 


1 <strong>...< /strong>: El nombre de esta etiqueta significa fuerte o grueso, y sirve para indicar que el 
texto que modifique es un texto de mayor importancia que el que le rodea y es necesario resaltarlo de algun 
modo. Los navegadores graficos en general muestran el texto afectado por esta etiqueta en negrita, por lo que 
puede usarse en sustitucion de la etiqueta B. El siguiente es un ejemplo tipico de su uso: 


<STRONG> 

No puedes 
</STRONG> 

perderte la version de n josL.ro 

editor HTML. 


1 <em>...< /em> : Esta etiqueta proviene de la palabra inglesa EMphasize, que significa enfatizar. El texto 
sobre el que actua esta etiqueta suele estar mostrado en cursiva, tal y como puede verse en la figura 3.5 como 
resultado del siguiente codigo: 


El autd® del libro es 
<EM> 

Noah Gordon 
</EM>. 


1 <code>... < /code> : con esta etiqueta senalamos un texto que forma parte de un codigo, de instrucciones 
de ordenador,... La palabra inglesa code significa, precisamente, codigo. Con Explorer ™ y Navigator™ el 
texto delimitado por esta etiqueta sera mostrado con un tipo de letra monoespaciada (por ejemplo Courier) y 
de tamano ligeramente menor al habitual. Esta etiqueta puede usarse, por ejemplo, para insertar codigo en C: 


<C00E> 

#include "stdx02.h" 
</C &&&» 


• <samp>... < /samp> : el nombre de esta etiqueta proviene del ingles SAMPle (muestra) y suele utilizarse para 
formatear ejemplos, muestras, codigos de scripts, etc. El texto formateado con esta etiqueta suele ser mostrado 
de la misma manera que el formateado con <code>. 

1 <var>...< /var> : delimita texto escrito por el usuario, variables, argumentos de comandos... Tanto el 
Explorer™ como el Navigator™ mostraran este texto como cursiva. Un ejemplo de su uso podrfa ser: 


La direccion de esa pagina es 
<VAR> 

www.towercom.es 

</VAR> 


w 
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1 <cite>...< /cite> : Esta etiqueta suele ser usada para introducir una cita o una referencia (significado de 
la palabra inglesa cite). A1 igual que la etiqueta anterior provoca que el texto que encierra sea mostrado en 
cursiva: 


<CITE> 

Pienso, luego existo 
dijo Descartes 


1 <dfn>...< /dfn> : En este caso el objeto de la etiqueta es introducir una DeFiNicion, pero el texto sera 
mostrado igualmente en cursiva: 


Pensar: 

Discur r:r, considerar, imaginar 
</DFN>. 


• <kbd>...< /kbd> : Tiene la funcion de formatear texto de entrada (input) del teclado (KeyBoarD en ingles) 
con un tipo de letra monoespaciado. Aunque esta etiqueta pertenece al HTML no es soportada por Explorer™, 
recomendable 

Pueden verse todos los ejemplos anteriores, tal y como los muestra Explorer™, en la figura 3.5: 
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Figura 3.5. En esta figura observamos los estilos logicos con Explorer™. La gran mayoria 
de ellos son mostrados como letra en negrita o cursiva. 



Todos estas etiquetas son entendidas por los navegadores en modo texto y usan los medios de que disponen para 
resaltar las frases que encierran. En la figura 3.6 se incluyen todos los ejemplos tal y como los muestra Lynx. 
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Figura 3.6. Usando estilos logicos no se nota tanto la diferencia entre Explorer™ y Lynx™ 
aunque los medios de este sean mas limitados. 


Estilos logicos 

<STRQNG>...</STRQNG> 

No puedes perderta la ultima version de nuestro editor H 1 
<EM>. . . •</ EM> 


El autor 

del libro es Noah Gordon. 

<CODE>.. 

.</CODE> 

#include 

"stdioS . h rr 

<CITE>.. 

.</CITE> 

Pienso, 

luego existo dijo Descartes 

<DFN>... 

</ DFN> 


Pensar:Discurrir, considerar, imaginar. 


Una caracteristica que llama la atencion de estas etiquetas es que varias de ellas llevan a cabo el mismo cometido, 
o eso parece. Esto es asf porque se esta describiendo el texto, no indicando como seran formateados. ^Porque no 
se unen las etiquetas que hacen lo mismo en una sola?, porque se supone que describen texto lo suficientemente 
diferente como para que aunque si es conveniente puedan ser formateadas de forma diferente. 

Ya se han visto los estilos logicos y los ffsicos, asf como las diferencias entre ellas. Como se ha dicho es 
recomendable usar los primeros siempre que sea posible. 

La etiqueta FONT. 

Las etiquetas de los apartados anteriores permiten modificar ciertos aspectos de la apariencia del texto de una 
pagina, pero ^es suficiente?. Cuando el WWW se hizo mas y mas popular y la apariencia de las paginas comenzo 
a adquirir la importancia actual se hizo evidente que no. 

Para poder controlar en mayor medida aun la apariencia del texto se creo la etiqueta FONT. A continuacion se 
explicaran sus virtudes, aunque cabe destacar que actualmente existe una alternativa mejor: las hojas de estilo en 
cascada o CSS que sera tratada en los ultimos capftulos del curso. 

Cambiando el tamano del texto. 

La etiqueta FONT permite tener un gran control sobre el tamano de un texto. Este tamano se especifica con su 
atributo SIZE y afectara al texto que encierren la instruction de inicio (<font size=" ">) y de fin (</font>). 
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La forma de especificar el tamano del texto consistira en darle el valor deseado al atributo SIZE, si bien hay dos 
formas de hacerlo: 


1. La primera de ellas es indicar un tamano absolute de 1 a 7. Correspondiendo 7 al tamano mayor y 1 al menor. 
El tamano por defecto del texto es el equivalente al numero 3. Veamos un ejemplo: 


Esto es texto normal 
<FONT SIZE="6"> 
y esto es grande 
</FONT> 


En la figura 3.7 podemos ver una comparacion de todos los tamanos. 

D1 

Figura 3.7. Ejemplo de uso de la etiqueta FONT y su atributo SIZE para cambiar el 
tamano del texto. 


Modos de uso de FONT - Microsoft Internet Explorer 


Archive Edicion Ver Ir a Favorites Ayuda 


K ’ 


a ® a a 0 § a 


TeHo dje tamano 1 (si 2 e="l'[) 

Texto de tamano 2 (size="2") 

Texto de tamano 3 (size—'3") 

Texto de tamano 4 (size-'4") 

Texto de tamano 5 (size—'5”) 

Texto de tamano 6 (size="6") 

Texto de tamano 7 (size : 


"W 
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2. La segunda consistira en indicar un tamano relativo respecto al que haya por defecto. Por ejemplo, para 
poner un tamano 6 y suponiendo un tamano por defecto 3 se usarfa: 


Texto de tamano 3 
<FONT SIZE= n +3"> 
Tamano 6 

</FONT> 


Es necesario hacer notar que el aumento de tamano se tomara siempre respecto al que se tenga por defecto 
(y que sera 3 mientras el usuario no cambie las preferencias de su navegador), por tanto anidando varias 
etiquetas FONT no se ira aumentando el tamano del texto como ocurria con la etiqueta BIG. Por ejemplo: 
D1 

Texto normal (tamano 3 ), 

<FONT SIZE="+1"> 

Texto de c a nano. 4v;;/ 

<font s.: zn- "-1 »> 

este texto sigue teniendo tamano 4 
</FONT> 

</FONT> 


En la figura 3.7 se puede ver un ejemplo de ambos modos de uso. 
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Figura 3.7. Ejemplo de uso de la etiqueta FONT y su atributo SIZE para cambiar el 
tamano del texto. 



Nota 

Cuando se indica el tamano del texto usando el metodo relativo (+n o -n) sera necesario usar comillas. 
Aunque algunos navegadores podrfan entender el valor aunque no se usen la unica manera de estar seguro 
de que la visualization sera correcta en todos ellos sera entrecomillar el valor dado al atributo SIZE. 

Conocidos estos dos me todos es el momento de introducir una nueva etiqueta muy relacionada con FONT: la 
etiqueta BASEFONT. Esta permite modificar el tamano por defecto del texto de la pagina Web. Su modo de uso 
es el siguiente: 


<BASEFONT SIZE="fi"> 


Donde n es un numero del 1 al 7 (por defecto vale 3) y las comillas son obligatorias. Podemos observar como esta 
etiqueta esta formada por una unica instruction cuya funcion sera modificar el tamano de todo el texto a partir 
de su inclusion. La unica exception que escapa al efecto de esta etiqueta son los encabezados, que mantienen su 
tamano. 

En general cuando se usa esta etiqueta se introduce como la primera despues de <body>, no usarla es lo mismo 
que usar <basefont size="3">. 
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A continuacion se incluyen dos ejemplos con distintos tamanos de letra por defecto: 


<BASEFONT SIZE="3"> 

Esto es texto de tamano 3, 
<FONT SIZE="+3"> 
esto es de tamano 6, 
</FONT> 

<F0NT SIZE="+4"> 
y esto es de tamano 7 
</FONT> 


Como se ve, para hallar el tamano de un texto hay que sumar el tamano relativo (+3 o +4 en este caso) al tamano 
por defecto del resto del texto (en este caso 2). Otro ejemplo mas: 


<BASEFONT SIZE="4"> 

Esto es texto de tamano 4, 

<FONT S ::ZE^"+3“> 
esto es de tamano 7, 

</FONT> 

<f aHT' SIZE— M +4 " 

y esto sigue siendo de tamano 7 
</FONT> 


En este segundo ejemplo se ve, ademas, que en ningun caso se puede conseguir un tamano superior a siete. De 
igual manera nunca se puede poner un tamano menor que uno. 

En la figura 3.8 podemos ver ambos ejemplos. 
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Figura 3.8. Los tamanos del texto que hallamos modificado usando el metodo relativo se 
calcularan a partir del al tamano por defecto del texto normal, pero sin pasar nunca de 7. 


Q FONT v BASEFONT - Microsoft Internet Explorer 


Archivo Edicion Ver Ir a Favoritos Ayuda 


J 4-- 


Esto es texto de tamano 3, 


esto es de tamano 6, y esl 

de tamano 7 


Esto es texto de tamano 4. 


esto es de taman 


esto sigue siendo de taman 

*] Listo 


Cambiando el color del texto 

Con otro atributo de la etiqueta FONT: COLOR se puede cambiar el color del texto con la misma facilidad con la 
que hasta ahora se ha cambiado su tamano. En un principio la unica forma de indicar un color consistfa en usar 
un codigo hexadecimal de la siguiente manera: 


<FG»T COLOR—"#RRGGBB"> 


Donde hay que sustituir RR por dos numeros hexadecimales que indican la cantidad de rojo (desde 00 que es 
ausencia de color a FF que es maxima cantidad de color), GG por otros dos que indican la cantidad de verde y 
BB por dos que indican la cantidad de azul. Combinando estos tres colores en diferentes proporciones se pueden 
crear hasta 16 millones de colores. Este sistema suele parecer ligeramente complicado en un principio, pero con la 
practica o con ayuda de herramientas graficas de selection de colores se convierte en un metodo bastante sencillo 
e increiblemente potente. 
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Existe un segundo metodo de indicar el color que sin duda le resultara al lector mas sencillo. Este metodo consiste 
en poner como valor de COLOR el nombre del color en ingles. Los colores aceptados son: Black (negro), white 
(bianco ),green (verde), maroon (marron rojizo), olive (verde oliva), Navy (azul marino), purple (violeta), red 
(rojo), yellow (amarillo), blue (azul), teal (verde azulado), lime (verde lima), aqua (azul claro), fuchsia (fusia), 
silver (gris claro). Aunque ademas de estos existen otros valores, no son soportados en todos los navegadores. 

Y la forma de usarlas queda clara en el siguente ejemplo: 


<FONT COLOR="FUCHSIA"> 

Colores en el Web 
</FQNT> 

</Hl> 

ya podemos decir que sabemos poner colores en las paginas Web, 

<FONT CGLOR="green"> 

verde 

</FQHT>, 

<FONT CQLOK="hlue"> 

</FONT> 

<FQ»T COLOR="red"> 
rojo 

</FONT>, 

etc. Ninguno se nos resiste. 


cuyo resultado podemos ver en la figura 3.9 : 

Figura 3.9. Gracias a la etiqueta FONT y a su atributo COLOR nuestras paginas tomaran 
un colorido totalmente diferente. 



W 
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Texto preformateado. 

En ocasiones es interesante mantener los espacios o saltos de lrnea de un parrafo tal y como estan en el codigo 
HTML. Para conseguir esto hay que alterar el comportamiento habitual del navegador que, como se ha visto, 
ignora este formato. Un ejemplo muy simple que muestra esto es la firma de paginas con dibujos de texto como 
el de la figura 3.10. 

Figura 3.10. Como se puede ver se pueden crear firmas muy originales usando 
unicamente caracteres y sin necesidad de imagenes. 



Se podrfa crear una imagen con el e insertarla en el documento, pero este es un dibujo hecho con caracteres y 
podrfa aprovecharse para que pudiese verse tambien con navegadores que trabajan en modo texto como Lynx. 
Algo importante en este caso ya que interesa que TODO el mundo vea la firma, ademas de que el tenerla como 
texto hace mas facil su modification. 

Sin embargo todos los espacios multiples se convertiran en un unico espacio, y por tanto si se escribiese el dibujo 
junto con el codigo HTML el navegador lo mostrana como vemos en la figura 3.11: 
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Figura 3.11. Si no usamos la etiqueta de texto preformateado la figura construida con 
caracteres se convertira en algo ilegible. 



que sin duda no es el resultado que esperabamos. 

Aunque este es un ejemplo entre muchos, el objetivo era resaltar que en ocasiones esa caracterfstica de HTML de 
eliminar todo formato manual en el texto es verdaderamente incomoda. Pero todo problema tiene solucion, y en 
este caso la solucion es una nueva etiqueta: <pre>...</pre> . El nombre asignado a esta etiqueta proviene de la 
palabra "PREformateado" (o PREformatted en ingles) y su funcion es mantener todo formateado manual que sea 
hecho en el texto escrito entre la instruccion de inicio (<pre>) y la instruccion de fin (</pre>). 

Continuando con el ejemplo de nuestra firma, el problema se podrfa solucionar si al insertarla la incluimos dentro 
de la etiqueta PRE de la siguiente manera: 


<PRE> 

( @ @ ) 

-0OQ0-(_)-0OO0- 

I Juan Juanita Juanez 
I E-mail: juan@juanito.ju 

-Oooq.- 

.oooO ( ) 

( ) ) / 

\ ( (_/ 

\_) 

</PRE%gt; 


En este caso la visualization sera la esperada, es decir la de la figura 3.10. 


TT 
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Aviso 

Es comun en los nuevos programadores que descubren la etiqueta PRE usarla abundantemente, sin 
embargo, esto puede causar problemas de visualization de esas paginas con algunos tamanos de ventana, 
resoluciones de pantalla o tipos de monitor distintos del nuestro. Recordemos que esta era la razon por 
la que los navegadores ignoraban el formato manual y debido a ello el uso de PRE debe estar limitado a 
los casos en los que sea realmente necesario. 

Uso de otras etiquetas dentro de <pre>...</pre> 

A efectos de HTML estandar, el contenido de la etiqueta PRE es el mismo que el de un parrafo creado con P. 
Las unicas excepciones son aquellos elementos que producen cambios en el tamano de la letra como por ejemplo 
IMG, BIG, SMALL, SUB, SUP y FONT. Esto excluye tambien a todas aquellas etiquetas que provocan un cambio 
de lfnea (son las llamadas etiquetas de nivel de bloque, block-level tags ) como son: HI,..., H6, BLOCKQUOTE, 
ADDRESS, HR, etc. 

Nota 

Tanto Netscape™ como Explorer™ permiten el uso de todo tipo de etiquetas dentro del texto prefor- 
mateado, incluso aquellas etiquetas de nivel de bloque. En estas ultimas hay ligeras diferencias entre 
Explorer™ y Netscape™, valga como ejemplo que los encabezados en Explorer™ mantienen el tipo de 
letra del texto preformateado (generalmente Courier New) mientras que Netscape™ los muestra con el 
tipo de letra normal (generalmente Times New Roman). 

Acentos y otros caracteres especiales 

Algunos caracteres distintos de los habituales en los lenguajes anglosajones son considerados en el mundo de la 
informatica como caracteres especiales. Dentro de estos se incluyen las letras acentuadas ni la letra ene. 

En los ultimos anos se ha avanzado mucho en conseguir que cualquier ordenador pueda leer todos los caracteres 
de todos los idiomas. En concreto es ya poco habitual que no se soporten los caracteres latinos. En cualquier caso 
es interesante saber que HTML ofrece mecanismos para insertar estos y otros caracteres especiales en aquellos 
sistemas donde no estan soportados. 

Sugerencia 

Una regia mnemotecnica para recordar que caracteres son considerados especiales por HTML es la 
siguiente : " Si se puede escribir un caracter pulsando sobre una sola tecla del teclado o usando como 
ayuda las teclas MAYUSCULAS o ALT-GR entonces ese caracter es valido". En el teclado espanol hay 
que hacer tres excepciones: la letra ’n’ y los sfmbolos 'i' y'\' que no son validas. 

El mecanismo ofrecido por HTML consiste en unos codigos especiales que todos los navegadores pueden entender. 
A estos codigos se les llama entidades de caracteres o con el nombre ingles: character entities. Todos estos 
codigos comienzan por el sfmbolo (ampersand) y terminan con el sfmbolo (punto y coma). Puede 
distinguirse entre dos tipos: 


Entidades de caracteres con nombre: son aquellas en las que los sfmbolos y se pone el nombre (o 
abreviatura) asignado a ese caracter. Solo existen para los caracteres especiales mas usados. En la figura 3.12 
se puede ver un ejemplo de este tipo de entidades en el que vemos la estructura general que todas tienen. 


IT 
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Figura 3.12. Una entidad de caracter con nombre tiene tres partes: ’& ’ + ’nombre’ + 


Secuencia de escape nominal 



1 Entidades de caracteres numericas: en este tipo de entidades entre y se escribe el numero asignado a 
ese caracter en el estandar ISO-Latin-1 precedido de una almohadilla: ’#’. Este tipo de entidades son menos 
usadas que las anteriores aunque tienen la ventaja de abarcar cualquier letra posible en cualquier idioma. En 
la figura 3.13 se muestra la estructura de este tipo de entidades usando de nuevo como ejemplo la letra A 
mayuscula y acentuada. 

Figura 3.13. Una entidad de caracter numerica tiene cuatro partes: ’ &’ + ’#’ + 
’numero’ + ’;’ 


Secuencia de escape numericc 



Entidades de caracteres para caracteres espanoles 


Sin duda, en Espana los caracteres considerados como especiales en el resto del mundo que mas se usan son los 
acentos, la letra ene y los srmbolos de apertura de interrogation (i) y admiration (;). En la tabla 3.1 se puede ver 
un un listado con dichos caracteres en los que mostramos las entidades de caracteres con nombre y numericas que 
tienen asociados. 
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Figura 3.1. Entidades de caracteres numericas y nominales para caracteres acentuados, 
’u’ con dieresis y ene. 


Caracter 

Secuencia 

escape 

Sec. escape 

numeric a 

Caracter 

Secuencia 

escape 

Sec. escape 

numeric a 

a 

&aacute; 

&#225 


A 

&Aacute; 

&#193; 

e 

&e acute; 

&#233 


E 

&Eacute; 

&#201; 

l 

&iacute; 

&#237 


i 

&Iacute; 

&#205; 

6 

&o acute; 

243 


6 

&0 acute; 

&#211; 

u 

&u acute; 

&#25Q 


tr 

&Uacute; 

&#21S; 

u 

&uuml; 

&# 252 


tr 

&Uuml; 

&#220; 

n 

&ntilde; 

&#164 


N 

&Ntilde; 

&#165; 

i 

— 

&#161 




&#191; 


Aviso 

Es muy importante respetar las mayusculas y minusculas en las entidades de caracteres. Si se usan 
indistintamente el resultado obtenido no sera el deseado o bien la entidad simplemente no funcionara. 

Entidades de caracteres para caracteres reservados 

En el lenguaje HTML existen una serie de caracteres que tienen un significado especial. La gran mayorfa de estos 
caracteres ya los conocemos y estamos acostumbrados a usarlos para programar un pagina Web. Algunos de estos 
caracteres son: <, >, & y ". Pero ^que ocurre si se quiere incluir alguno de estos caracteres en alguna pagina? 
Por ejemplo, si se desea escribir sobre los formatos logicos en HTML y se quiere poner la cadena en 

una pagina. Si la se pone tal cual, el navegador la confundira con una etiqueta mas y pondra el texto siguiente en 
negrita. ^Existe entonces alguna forma de escribir el nombre de una etiqueta? La respuesta es, obviamente, SI. Y 
la solution es usar las entidades de los caracteres reservados de HTML en vez del propio caracter. Estas entidades 
son las mostradas en la tabla 3.2. 

Figura 3.2. Entidades de caracter numericas y nominales para caracteres reservados del 
lenguaje HTML. 


Caracter 

Secuencia de escape 

Sec. de esc. numerica 

< 

&lt; 

&#139; 

> 

&gt; 


& 

&amp; 

&#3S; 


&quote; 

&#34; 
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Por ejemplo en vez de escribir: Para poner texto en negrita se usa la etiqueta <b> 

Deberfa escribirse: Para poner texto en negrita se usa la etiqueta <B> 

Este segundo ejemplo se visualizara correctamente en el navegador, el lector esta invitado a probar los dos 
ejemplos. 

Otras entidades de caracteres 

Ademas de las vistas hasta ahora existen otras entidades de caracteres que son de especial utilidad en la creation 
de paginas Web. Estos son los de la tabla 3.3 

Figura 3.3. Entidades de caracteres numericas y nominates para algunos caracteres 
especiales de uso comun. 


Caracter 

Secuencia de escape 

Sec. de esc. numerica 

© 

&copy; 

&#169; 

© 

&reg; 

&#174; 

[espacio] 

&nbsp; 

— 


El espacio requiere un comentario especial. El nombre de su entidades de caracteres, nbsp, significa non breaking 
space que quiere decir espacio que no puede ser roto (o eliminado). Este tipo de espacios no es ignorado por los 
navegadores. Debe recordarse que si incluimos varios espacios en nuestra pagina el navegador los reduce a uno 
solo, pues esto no ocurre con este tipo de espacios. Si se escribe &nbsp; cinco veces el navegador mostrara cinco 
espacios, con lo cual se pueden crear margenes y sangrados manualmente. 

Nota 

En los archivos extra de este capltulo se incluye un listado de todos los caracteres del conjunto ISO-Latin- 
1 junto con sus numeros asociados. Este listado va en el archivo (especial. html [extra/especial.html]), 
para que pueda ser visualizado con diferentes navegadores y en dos imagenes GIF que corresponden a 
la visualization de dicho archivo HTML con Internet Explorer 4.0™. (escape. gif y latinl. gif). 

Esta information esta dividida en dos tablas, en la primera se incluyen todos aquellos caracteres que 
tienen una entidades de caracter nominal asociada. En una segunda tabla se incluyen todos los caracteres 
visualizables (por ejemplo el caracter retorno de carro no se puede ver), del ISO-Latin-1 junto con su 
numero asociado. A partir de este numero podremos construir la entidades de caracter numerica. 

El porque de los caracteres especiales. Explication tecnica 

En los comienzos de la informatica se creo un codigo llamado ASCII (American Standard Code for 
Information Interchange) para representar los caracteres. Este codigo asignaba a cada caracter un numero 
(de 7 bits) que al fin y al cabo es lo unico con lo que un ordenador sabe trabajar. Debido al tamano de 
ese numero (7 bits) ese codigo constaba unicamente de 128 caracteres que inclufa las letras, numeros y 
algunos caracteres habituales. Estos caracteres son entendidos en cualquier ordenador y por tanto pueden 
ser usados con libertad en un documento HTML. Con la evolution y expansion de los ordenadores pronto 
surgio la necesidad de anadir nuevos caracteres, como por ejemplo aquellos especfficos de cada idioma. 

Por esta razon se crearon extensiones del codigo ASCII que anadfan un bit al numero asociado a cada 
caracter con lo que el numero de caracteres representable aumentaba a 256. El problema es que no hubo 
un acuerdo en este ASCII extendido y se crearon varias versiones en los que habfa ligeras diferencias. 

Los documentos HTML pueden tener todo tipo de caracteres pertenecientes al IS-Latin-1 (ISO-8859-1) 
que es una de estas extensiones. Aun as! los caracteres que no pertenezcan al codigo ASCII de 7 bits 
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deben introducirse con la secuencia de escape correspondiente para evitar problemas con ordenadores 
que no soporten el ISO-Latin-1 sino otra extension del ASCII. El proximo estandar del lenguaje HTML 
(HTML 4.0) ha llevado mas lejos la extension del codigo ASCII soportando el conjunto de caracteres 
UNICODE. Este conjunto incluye los caracteres del ASCII (a los que asigna el mismo numero y por tanto 
es compatible), pero anade todos los caracteres de todos los idiomas del mundo (incluidos los chinos y 
japoneses). Esto es importante porque UNICODE se esta imponiendo como uno de los estandares del 
presente y del futuro. 
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En este capitulo nos adentramos en las posibilidades que ofrece el lenguaje HTML para la creation de listas. Es 
posible crear listas numeradas, no numeradas, de definition, etc. gracias a las cuales se facilitara al programador 
la labor de organizar los datos de un documento HTML y dar una apariencia mas agradable a la pagina. Despues 
crearemos una segunda pagina web de la que sin duda podremos presumir, pero antes aprenderemos a incluir 
comentarios en nuestras paginas. 

Listas en HTML 

Junto con los parrafos y los encabezados, las listas son uno de los elementos HTML mas comunmente usados en 
las paginas web. Tras este capitulo sabremos, no solo crear hstas, sino crear varios estilos de estas, una para cada 
ocasion. Y no tardaremos en ponerlas en practica ya que al final del capitulo crearemos la segunda pagina de la 
cual podemos ver un anticipo en la figura 4.1. 


IT 



Listas y Comentarios en HTML 


Figura 4.1. En esta figura podemos apreciar la presentation de la segunda practica del 
curso que realizaremos al final del capitulo. 


Q Agenda de viajes LOS ALPES - Microsoft Internet Explorer 



NO podrA encontrar mejores vl 

Y A LOS PRECIOS MAS INTERESANTES DEL 


* Nuestras principales QFERTAS del mes 

• LOS ALPES - 20 anos a su servicio 

• Viajes a su medida 

• Donde encontramos 



Una lista, o listado, es una enumeration de dos o mas elementos y suelen disponerse de tal forma que se facilite 
la distincion entre ellos. 
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El lenguaje HTML define los siguientes tipos de listas: 


• Numerada u ordenada. 

• No ordenada. 

• Listas de glosario o de definicion. 

• Menus. 

• Usadas con parrafos cortos. 

• Listas de directorio. 

Pronto sabremos como crear cada una de ellas y cuando es conveniente usar una u otras, y comprobaremos, una 
vez mas, la gran sencillez del lenguaje HTML una vez nos hemos habituado a el. 

Etiquetas necesarias para crear listas 

La forma de crear listas difiere ligeramente de los elementos HTML vistos hasta ahora, ya que consta de dos pasos. 
Primero hay que definir el tipo de lista y despues deben insertarse cada uno de los elementos de lista. 

A1 crear una lista deberemos indicar su inicio y su fin. Para empezar la lista usaremos la instruccion de inicio de 
la etiqueta de esa lista. Existe una etiqueta para cada tipo distinto de lista, por ejemplo, para crear una lista no 
ordenada sera necesario usar la etiqueta UL (su instruccion de inicio sera <ul>). Una vez hemos abierto la lista 
deberemos insertar, como hemos dicho antes, cada uno de los elementos de lista. Para ello usaremos una nueva 
etiqueta (o dos en algun caso) que dependera del tipo de lista. En el caso de la lista no ordenada los elementos se 
introducen con la etiqueta de una unica instruccion LI, por ejemplo: 


Yo praetico: 
<UL> 

<1,1 >l''u'_bo 

<Ll>Baloncesto 
<l.r>Ter. i s 
<t,l>eLc. 


En la figura 4.2 podemos ver como muestra Internet Explorer™ este codigo 
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Figura 4.2. Como aperitivo mostramos una lista no numerada en la que ya se pueden 
apreciar las caracteristicas fundamentales que tienen en HTML. 


Q Primer ejemplo de una LISTA - Microsoft Internet ... 

mmm 

Archivo Edicion Ver Ir a Favoritos ► 

Direction 

& 

*g|| 

a ® 

Yo practico: 


i 

• Futbol 

• Baloncesto 

• Terns 

• etc. 



rrrr jMiPc 

■ 


El ultimo paso, que ya hemos anticipado en este ejemplo, sera cerrar la lista, para lo cual usaremos la instruccion 
de fin de UL: </UL>. 

Y a todo esto, ^donde esta la diferencia?. Pues bien, la diferencia es la etiqueta LI (En otras listas se usara tambien 
LI o alguna etiqueta similar, como luego veremos). La etiqueta UL no tiene ningun significado por si sola, necesita 
a LI. Y por otro lado LI no puede ser usada como una etiqueta independiente sino que debe ir dentro de UL. Por 
esta razon en ocasiones se suele llamar a LI subetiqueta. 

Nota 

Algunos navegadores permiten el uso de <LI> fuera de ninguna lista como si se tratara de una etiqueta 
independiente. Estos navegadores mostraran el elemento de lista como si fuese perteneciese a una lista 
no numerada pero sin sangrado. Sin embargo esta forma de usar <li> no esta admitida por el estandar 
y por tanto no es recomendable si queremos que todos los navegadores entiendan nuestras intenciones. 

Antes de comenzar haremos un comentario mas. La etiqueta <li> tiene instruccion de fin (</li>) que delimita el 
final del elemento de lista actual, pero es opcional usarla o no. Si no se hace se considera que el elemento termina 
cuando empieza el siguiente o cuando termina la lista. De hecho algunos navegadores al interpretar el codigo 
HTML ignoran completamente esta instruccion y solo entienden que el elemento de lista ha terminado cuando se 
empieza otro o se acaba la lista. 

Vista la teorfa nos adentramos en los distintos tipos de listas en las que veremos varios ejemplos practicos. 

Listas no ordenadas 

Probablemente el tipo de listas mas usados en las paginas web son las listas no ordenadas. Como hemos adelantado 
antes a modo de ejemplo, este tipo de lista queda delimitada por la etiqueta <UL>...</ul> (UL proviene de 
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Unordered List, que significa lista no ordenada). Dentro de estas etiquetas insertaremos cada elemento con la 
etiqueta <LI>. Veamos un ejemplo ligeramente mas completo que el anterior: 

Mi ordenadar tiene las siguientes caracteristicas: 

<UL> 

<LI>Procesador Pentium 166 
<IjI>CD—ROM 8x 

<LI>Tarjeta de sonido 16 bits 
<LI>Tarjeta de video con 2 Mb 
</UL> 

En la figura 4.3 podemos ver como muestra esta lista el navegador Explorer™. Vemos que esta ligeramente 
sangrada hacia la derecha y con un simbolo grafico para distinguir cada elemento de lista, este srmbolo recibe el 
nombre de vineta. 

Figura 4.3. Los elementos de las listas no numeradas van precedidos de una vineta. En 
Explorer™ esta vineta es habitualmente un punto grande. 


1 Q Lista no ordenada - Microsoft Internet Explore 


Archivo Edicion Ver U a f avoritos Ayuc ► 

1 $ 


Direction 

Lista no ordenada 

d 

Mi ordenador tiene las siguientes caracteristicas 

• Pro cesador Pentium 166 

. CD-ROM 8x 

• Tarjeta de sonido 16 bits 

• Tarjeta de video con 2 Mb 

zi 

PI - B ^ pc 

A 


En la figura 4.4 vemos como a falta de vinetas graficas Lynx diferencia cada elemento con un asterisco (*). 

















Listas y Comentarios en HTML 


Figura 4.4. Lista no ordenada en Lynx. Cada uno de los elementos de lista comienza con 
un asterisco simulando a los simbolos grafico que usan Netscape™ o Explorer™. 


Lista no ordenada 

Mi ordenadou tiene las siguientes cauacteristicas 
+ Procesadou Pentium 166 

* CD-ROM 8x 

* Tarjeta de sonido 16 bits 

* Tarjeta de video con 2 Mb 


Listas ordenadas 

Este tipo de listas numera los elementos de lista en el orden en el que se han introducido en el codigo HTML. La 
numeracion se realiza con numeros empezando por el 1. 

Nota 

Las ultimas extensiones de HTML permiten elegir entre distintos tipos de numeracion para las listas 
ordenadas. Estas extensiones seran cubiertas en un capftulo posterior. 

Este tipo de listas queda delimitado por la etiqueta <ol>...</ol> (OL: Ordered List, Lista ordenada), y cada 
elemento se inserta, al igual que en el caso de listas no ordenadas, con la etiqueta <li>. 

En la figura 4.5 vemos un ejemplo de uso de listas ordenadas 
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Figura 4.5. En las listas ordenadas cada uno de los elementos de lista aparecen numerados 
y sangrados hacia la derecha. 



que se corresponde con el siguiente codigo: 


Un buen equipo adaptado a las nuevas tecnologias consta de: 

<0L> 

<LX>CPU rapida 

<Ll>Impresora a color de buena definicion. 

<LI>Altavoces y camara de video. 

<Ll>Modem de velocidad 28K o superior. 

</0L> 


El navegador automaticamente numera los elementos de lista. Si en algun momenta queremos insertar un nuevo 
elemento entre los existentes usando, de nuevo, <Li>, se realiza automaticamente una renumeracion de los 
elementos de la lista. Tal y como podemos ver en la figura 4.6. 
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Figura 4.6. Cuando insertamos un nuevo elemento de lista en una lista ordenada los 
elementos siguientes son automaticamente renumerados. 



que se corresponde con este codigo: 


Un buen oquipo adaptado a las nuevas tecnologias consta de: 
<XiI>CPU rdpida 

<LI>Impresora a color de buena definicion. 

<Ll>Altavoces y castara de video. 

<LI>Escaner color 

<LI>Modem de velocidad 28K o superior. 

</0L> 


En el navegador Lynx™ las listas numeradas se muestran como vemos en la figura 4.7. 
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Figura 4.7. En el caso de las listas numeradas la diferencia entre la visualization con 
Lynx™ y con Explorer™ es menor. 


Lista ordenada 

Un buen equipo adaptado a las nuevas tecnologias consta c 

1. CPU rapida. 

2 . Impresora a color de buena definicion. 

3. Altavoces y camara de video. 

4. Escaner color. 

5. Modem de velocidad 28K o superior. 


Listas de glosario 

Este tipo de listas es usado, como su nombre indica, para crear glosarios, es decir listas de definiciones o de 
descripciones. El principio y final de este tipo de listas se delimitan con la etiqueta <dl>... </dl > (DL: Definition 
List, Lista de definition). La insertion de elemento es ligeramente distinta a la del resto de listas ya que no se 
usa la etiqueta «li». Esto es asf porque en este caso cada uno de los elementos de lista esta compuesta de dos 
partes: 


• La palabra que queremos definir: para insertar la palabra usaremos la etiqueta <dt> que proviene de Definition 
Term (Termino de definicion). Esta nueva etiqueta funciona de forma muy similar a <li> y la instruction de 
fin (</dt>) es igualmente optativa. 

• La definicion o descripcion de esa palabra: una vez indicada la palabra es hora de poner su definition. Para 
ello usamos otra nueva etiqueta: <DQ> cuyas siglas significan Definition Description (parte de la definition 
que contiene la description). La definition suele ser un parrafo y sera mostrado por los navegadores sangrado 
con respecto al texto anterior. 

En la figura 4.8 podemos ver un ejemplo de listas de glosario vistas con Internet Explorer™. 
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Figura 4.8. Las listas de glosario constan de dos partes la palabra de definicion y la propia 
de definicion que es mostrada como un nuevo parrafo con sangrado. 



En la figura 4.9 se muestra la misma vista con el navegador Lynx. 
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Figura 4.9. Listas de glosario en Lynx. De nuevo las diferencias respecto a la visualization 
con Explorer™ son escasas. 


Lista de glosario 


Hipertexto 

Se llama documento hip 
donde el usuauio puede 
documento. Estas zonas 


ertexto 

pulsar 

pueden 


a aquel que tiene zi 
con el raton para a< 
ser imagenes o text: 


Ancho de banda de una red 

Es, en pocas palabras, la capacidad de transmisioi 
y esta muy relacionada con la velocidad de transm: 
puede se alcanzar. 


HTML 

HiperText Markup Language, Lenguaje de marcas hip 
Lenguaje para disenar paginas del World Wide Web 


En ambos ejemplos el codigo usado es el siguiente: 


<DT>Hipertexto 

■<pD>.Se llama documento hipertexto a aquel 
quo tiene zonas activas donde el 
usuario puede pulsar con el raton 
para acceder a otro documento. Estas 
zonas pueden ser imagenes o texto. 

<DT>Ancho de banda de una red 

en pocas palabras, la capacidad 
de transmision que soporta y esta 
muy relacionada con la velocidad de 
transmision que se puede alcanzar. 

<DT>HTML 

ijt>D>HiperText Markup Language, Lenguaje 
de marcas hipertexto. Lenguaje para 
disenar paginas del World Wide Web. 


Directorios y menus 

Las listas vistas hasta ahora son, sin duda, las mas usadas, pero existen otros dos tipos que estan algo mas olvidadas 
por los creadores de webs: las listas de directorio y las listas de menu. 




Listas y Comentarios en HTML 


Las listas de menu son usadas cuando los elementos de lista son frases de una sola h'nea mientras que las listas 
de directorio fueron creadas para ser usadas cuando son terminos cortos que pueden ser mostrados en multiples 
columnas. 

Nota 

A pesar de las recomendaciones del estandar HTML los principales navegadores muestran las listas 
de directorios y menus de igual manera (o muy similar) a las listas no ordenadas. Por esta razon es 
aconsejable usar unicamente los tres primeros tipos de lista vistos. 

A continuation mostramos un ejemplo de listas de menu y listas de directorio. En la figura 4.10 podemos ver dos 
ejemplo ambos tipos en Explorer™ y en la figura 4.11 el mismo ejemplo tal y como se verfa en Lynx™. 

Figura 4.10. En Explorer™ las listas de menu (<menu>) y de directorio (<dir>) son 
mostradas de igual manera que las listas no numeradas (<ul>). 
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Figura 4.11. En Lynx™ las listas de menu y de directorio son mostradas simplemente 
insertando cada elemento de lista en una nueva linea. 


Cancion 1: 

Tranquilo majete 

Cancion 2 : 

Lluvia en soledad 

Cancion 3: 

La mujer barbuda 

Cancion 4: 

Madera de colleja 

etc. 


Juegos 


Graficos 


Internet 


Programaci 

on 


El codigo usado es: 


<MENU> 

<LI>Cancion li Tranquilo majete 
<LI>Cancion 2: Lluvia en soledad 
<Li>Cancidn 3: La mujer barbuda 
<LI>Cancion 4: Madera de colleja 
<LI>etc. 

</MENU> 

<mr> 

<LI>Juegos 
<LI>Graficos 
<LI>Internet 
<LI>Programaci6n 
</DIR> 


Anidamiento de listas 

Vistos todos los tipos de listas se nos puede plantear una pregunta: i,Se puede incluir una lista dentro de otra?. La 
respuesta es SI. El lenguaje HTML permite insertar unas listas dentro de otras ya sean del mismo o de distinto 
tipo. A esta posibilidad se le llama anidamiento de listas y la forma de realizarlo es incluir todo el codigo de una 
lista dentro de uno de los elementos de la otra. En el siguiente ejemplo combinaremos algunos de los ejemplos 
anteriores para dar lugar a un listado con varios listas anidadas unas dentro de otras: 


Los temas del niimaro de este mes de nuestra revista son: 
<MENU> 

<Ll>Un nuevo Internet: IPv6 
<li>E 1 WWW cobra vida: ha llegado el 
HTML dinamico 

<Ll>Que ordenador comprarse: 


<LI>CPU rapida. Con las siguientes 
caracteristicas: 


W 
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<Li>Procesador Pentium 166 
<li>CD-ROM 8x 

&iyJ>T-a r jet a de son! do 16 bits. 

< 1.1 >7ar jeta de video con 2 Mb 
</UL> 

<J,-: > : ir.pr esc ra a color de buena 
definicion. 

<Ll>Altavoces y camara de video. 

>i'scancr color. 

<Ll>Modem de velocidad 2 8K o 
superior. 

</0L> 

:/MENU> 


En las figuras 4.12 y 4.13 podemos ver como se muestra este ejemplo en los navegadores Explorer™ y Netscape 
Navigator™. Aunque hay ligeras diferencias, en ambos se puede observar como cada nuevo nivel de anidamiento 
se produce un sangrado en la hsta. Ademas se observa que en la segunda lista no numerada la vineta que precede 
cada elemento ha cambiado, lo que ayuda a diferenciar entre ambas listas. 


W 
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Figura 4.12. Gracias al anidamiento podemos crear listas muy complejas en HTML. El 
segundo nivel de lista no numerada usa una vineta distinta. 


0 Anidamiento de listas - Microsoft Internet Explorer 

UMEl 

Archive Edicion Ver jr a Favorites Ayuda 

£ 1 


Direccion 




Los temas del numero de este mes de nuestra re vista son: 

• Un nuevo internet: IPv6 

• El WWW cobra vida: ha llegado el HTML dinamico 

• Que ordenador comprarse: 

1. CPU rapida. Con las siguientes caracteristicas: 

■ Procesador Pentium 166 
- CD-ROM 8x 

■ Tarjeta de sonido 16 bits 

■ Tarjeta de video con 2 Mb 

2. Lnpresora a color de buena defimcion. 

3. Altavoces y camara de video. 

4. Escaner color. 

5. Modem de velocidad 28K o superior. ^ 
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Figura 4.13. Comparando esta figura con la 4.8 podemos ver las ligeras diferencias que 
existen en los distintos tipos de listas entre Netscape™ y Explorer ™. 



Comentarios en HTML 

Se llama comentario en el ambito de HTML las notas que el autor o autores ponen en el codigo para facilitar su 
entendimiento. Estos comentarios no son mostrados por el navegador y por tanto solo seran visibles al leer el 
codigo HTML de la pagina web. 

En general es recomendable ir insertando comentarios al crear una pagina para marcar determinadas partes y asi 
encontrarlas mas facilmente. Algunos usos que suelen darse a los comentarios son: 


1 Notas para recordar detalles del codigo la proxima vez que vayamos a cambiarlo, como por ejemplo para 
indicar por que hemos usado una etiqueta y no otra, por que hemos usado una lista numerada y no una no 
numerada, etc. Este tipo de comentarios son muy usados cuando las paginas son complejas. 
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•Apuntar que queda por hacer en una determinada seccion o como es conveniente cambiarla. O bien para 
indicar el comienzo o fin de una determinada seccion de la pagina. 

• Para identificar facilmente partes importantes del codigo o aquellas que cambian mas a menudo. 

• Usos particulares de cada webmaster. De hecho los comentarios pueden usarse para cualquier cosa y cada 
programador de paginas web tiene su propio modo de usarlos. 


Creadon de comentarios en HTML 

Para crear un comentario no se usa una etiqueta, aunque es una estructura parecida. En primer lugar ponemos 
una cadena que indica el comienzo del comentario: <! —, esto es, el sfinbolo menor que , seguido del sfinbolo 
fin de exclamacion y de dos guiones, todo ello sin espacios entre ellos. Todo el texto que le siga sera parte de 
comentario, que terminara cuando insertemos la cadena de fin: —> , dos guiones y el sfinbolo mayor que. La 
estructura de un comentario es por tanto: 

<!—Esto es un correnLar Lo—> 


Suele ser recomendable dejar un espacio entre ambas cadenas y el texto anterior y posterior, tal y como acabamos 
de mostrar. 

Veamos algunos ejemplos practicos de comentarios: 


<!—Aqui coraienza el cuerpo de la pagina—> 

<!—Cambiar este parrafo para que se entienda mejor—> 
<!—Deberj,#. anadir mas enlaces en esta pagina—> 


En la figura 4.14 podemos ver un ejemplo de un comentario junto con otro codigo HTML y el resultado de 
visualizar ese codigo con el navegador. Como observamos el navegador ignora los contenidos del interior de los 
comentarios. 
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Figura 4.14. A1 mostrar la pagina los navegadores actuan como si los comentarios no 
existieran. Como vemos Explorer ™permite comentarios multilinea y con etiquetas 
dentro. 


C6digo: 


<!— Esto es un comentario —> 

Esto es texto normal 

<!— Esto vuelve a sec un comentario 
Has texto normal 

<!— Los comentarios de varias lineas tambien 


funcionan, pero no son recomendables 
<!— Comentario con etiquetas dentro: <B>HOLA</B> —> 


Visualizoci6n con Explorer: 

ljldlInl.IIJ.IJI.il,II.W H!H 1 HWiffil 11 IBM 1 ! JIWBHI 


rm 

Archive Edicion Ver Ir a Favoritos Ayuda 


-1 & a Sl'& § 

0 1 

Direccion 

Esto es texto normal Mas texto normal 



ijMiPC 




Para terminar solo queda hacer una aclaracion. Tal y como hemos dicho todo el texto entre los srmbolos "<! — " 
y "—>" es un comentario sea lo que sea y tenga el numero de lineas que tenga. Sin embargo el estandar de HTML 
recomienda que los comentarios se limiten a una sola linea, y si debe ocupar varias necesariamente se aconseja 
incluir los simbolos de comentario en cada una de ellas. 

Practica 2: Un sitio web completo. 

Ya podemos dar por concluida la primera fase del aprendizaje del HTML. En poco tiempo hemos aprendido: 


• Como es la estructura general de una pagina: para crear esta estructura usabamos las etiquetas HTML, HEAD 
y BODY. 

• Como dar tftulo a la pagina con la etiqueta TITLE. 

• Como crear encabezados con las etiquetas HI, H2, H3, H4, H5, H6. 

• Como introducir parrafos de texto normal con la etiqueta P y alinearlos a nuestro gusto. 

• Como crear otros parrafos con BLOCKQUOTE y ADDRESS, y en este mismo capitulo parrafos preformatea- 
dos con PRE. 
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• Como dividir el texto con saltos de lfnea o lfneas horizontales de distintos grosores y tamanos. 

• Tambien hemos aprendido a insertar en nuestras paginas los dos elementos que mas fama han dado al World 
Wide Web: los enlaces hipertexto y las imagenes. 

• Vimos tambien como dar distintos formatos al texto, tanto formatos logicos (EM, STRONG, CODE, etc.) 
como fisicos (B, I, TT, BIG, SMALL, SUB, SUP, etc.). 

• Y por ultimo en este breve resumen hemos de mencionar la creation, recien aprendida de diversos tipos de 
listas (UL, OL, DL, MENU y DIR) 

Como vemos la lista es bien larga y ya estamos equipados con conocimientos suficientes para crear una pagina 
compleja. 

Para afianzar estas bases lo mas importante es la practica, y para no quedarnos solo en las palabras vamos a 
empezar ya con la segunda practica del curso. Esta consistira en la realization de un sitio web completo que, 
aunque es sencillo (dos paginas), permitira al lector hacerse una idea de los procesos que hay que llevar a cabo en 
la elaboration de webs en el mundo profesional actual. 

El sitio web que crearemos puede ser o bien de una empresa de nuestra propiedad, o de una que ha contratado 
nuestros servicios. Hemos elegido como ejemplo una agenda de viajes, pero invitamos al lector a buscar otro 
tema, ficticio o real, y crear su propia pagina web, si asf lo prefiere. 

A lo largo de la creation de la pagina iremos detallando los pasos seguidos para que el lector pueda ir repitiendola 
o creando otra similar en su ordenador. 

Nota 

En el archivo practica-2.tgz [extra/practica-2.tgz] se incluye el sitio web completo listo para ser vi- 
sualizado y en el puede observarse el codigo completo. Los documentos HTML son los llamados 
index.html y mes.html. Las imagenes necesarias para la realization de las paginas se encuentran 
en el subdirectorio img. 

Planificacion 

El primer paso en la creation de una pagina es la planificacion. Si estamos creando el web de nuestra propia 
empresa deberemos llevarla a cabo por nosotros mismos (en nuestro caso ficticio tambien tendremos que realizarla 
nosotros), pero si crearamos el web para otra empresa deberfamos encargarle ciertos deberes : presentation de la 
empresa, presentation de su catalogo, promociones especiales, etc. Tal vez ya tenga un proyecto publicitario en 
marcha y quiere que el web este en lfnea con este. 

En nuestro caso, por no aburrir al lector, no entraremos demasiado en este tipo de aspectos del diseno de paginas, 
pero queremos resaltar la importancia que tiene a la hora de conseguir exito con las paginas que hemos creado. 

Secciones de la pagina 

Una vez conocidos todos los requisitos que debe cumplir el web es hora de hacer el primer borrador. En el 
debemos incluir las distintas secciones que debe tener el sitio web. 

De ahora en adelante nos referiremos al conjunto de documentos HTML que estamos creando como sitio web, 
website en ingles, y llamaremos pagina o pagina web a cada uno de esos documentos. 

A la hora de realizar este primer borrador hay que tener en consideration varios aspectos. La information de la 
pagina debe tener una estructura jerarquica, con una pagina principal con enlaces a las distintas secciones. En esta 
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practica hemos decidido dividir la informacion en cuatro secciones y hemos creado una pantalla de presentacion 
que nos permita acceder a ellas: 


1 Pantalla de presentacion: Es lo primero que se vera al visitar la pagina. En ella debe verse el nombre de la 
agenda asf como un menu con las opciones que presenta la pagina. Podnamos pensar en poner el titular con un 
encabezado de tipo HI, pero para crear un mayor impacto estetico crearemos un titular grafico e incluiremos 
el logotipo (ficticio) de la agenda a su izquierda. Despues incluiremos un menu con enlaces a las diferentes 
secciones y por ultimo alguna foto de lugares donde se pueda viajar con la agenda ’Los Alpes’. En la figura 
4.1 al comienzo de este capftulo podemos ver esta pantalla de presentacion. 

1 Nuestras principals OFERTAS del mes: En esta seccion informaremos de los viajes que la agenda de viajes 
’Los Alpes’ oferta a precios especiales en el mes actual. Esta seccion tiene una longitud considerable, por 
lo que a pesar de la sencillez de este web decidimos crearla en un documento aparte, al que llamaremos 
mes.html. En la figura 4.15 vemos la presentacion de esta pagina que como vemos guarda una armonfa con 
la presentacion anterior. 

Figura 4.15. Pantalla de presentacion de la segunda pagina web de nuestro website. Es 
importante mantener un parecido entre todas las paginas que lo componen. 
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cgj Los alp 

Agenda de viajos \ 


NUESTRAS OFERTAS DEL 


En la Agencia de viajes Los Alpes estamos celebrando nuestros primeros 20 anos 
preparado una sene de OFERTAS Y VIAJES ESPECIALES que no podr 


ANDORRA ORLANDO LOS ANGELES PARIS fc 







1 Los Alpes 20 anos a su servicio: En esta section daremos information de la empresa. Esta section es tipica en 
todas las paginas del WWW y suele denominarse la pagina del Quien Soy/Quienes somos. Podemos apreciar 
esta section en la figura 4.16 


Figura 4.16. En la seccion ’Los Alpes - 20 anos a su servicio’ podemos apreciar el uso 
de la etiqueta BLOCKQUOTE y de una lista no ordenada. 
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Q Agenda de viajes LOS ALPES - Microsoft Internet Explorer 


Archivo Edicion Ver Ir a Favoritos Ayuda 


± : ±z \p. a ®mm3uS 


Los Alpes 20 afios a su servicio 


ft 


n 

w 


En la Agencia de viajes Los Alpes estamos celebrando nuestros prime] 
hemos preparado una serie de QFERTAS Y VLAJES ESPECIALES que no pc 
la calidad de nuestros viajes demostrada a los largo de nuestra historia, ademas: 


El personal de nuestra empresa estaformado por un equipo de profesit. 
experiencia minima de 15 anos en el mundo del turismo. Dicha experie 
especializacion sea muy amplia, garantizando con ello un servicio de g 


To da esta experience se traduce en el mejor servicio posible y los mejores precio 
innumerables ventajas que solo nosotros podemos ofrecer: 


Oficinas en las principals ciudades del mundo 

Acuerdos con las principals cadenas hoteleras y de alquiler de coches y au 
Proporcionamos servicios especiales: guias, traductores, coordinacion de re 


W 


Mi PC 


1 Viajes a su medida: Unos de los puntos fuertes que pretende promocionar nuestra empresa es la creacion 
de viajes a la medida del cliente. Si eres joven te hara descuentos especiales, los ejecutivos no tendran que 
soportar tiempos de espera innecesarios,... Deberemos dar constancia de ello en el web y por eso le dedicamos 
una seccion entera. En la figura de la pagina completa podremos apreciar esta seccion y la siguiente. 
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• Donde encontrarnos: Esta es otra section que debe existir obligatoriamente en las paginas de toda empresa 
que tenga oficinas de servicio al cliente. El objetivo de la pagina sera abarcar una mayor cantidad de publico, 
pero tambien se pretendera que los clientes se pongan en contacto con la agencia personalmente, por ello es 
importante resaltar bien sus direcciones, telefonos, fax, etc. 

Las tres ultimas secciones seran demasiado breves por lo que estaran incluidas en la pagina principal a la que 
llamaremos, como es comun, index.html. Al principio de cada una de estas secciones incluiremos un ancla de 
manera que podamos referimos a ellas posteriormente usando enlaces a anclas. 

Una vez hecho el boceto de borrador hay que ponerse manos a la obra y disenarlo el aspecto grafico y realizar la 
programacion HTML. 

Diseno grafico 

Este es un aspecto fundamental al crear paginas web. En funcion de la apariencia de nuestro sitio web 
conseguiremos o no que los futuros visitantes se queden en el o incluso que lo visiten con regularidad. La 
presentation grafica debera ser lo mas atractiva posible, pero sin que la pagina este demasiado sobrecargada. 
En el siguiente capitulo trataremos a fondo el diseno grafico y todas las posibilidades avanzadas que el lenguaje 
HTML nos ofrece a este respecto. 

Los aspectos graficos que mas destacan en nuestra pagina son los que pertenecen a la pantalla de presentation 
entre estos destacan el LOGO de la pagina que vemos reproducido en la figura 4.17 

Figura 4.17. Logo de los alpes. 



y el tftulo de esta, que vemos en la figura 4.18. 


LOGO da 
Los Alpas 
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Figura 4.18. Letrero de ’Los Alpes’ que, junto con el logo, aparecera en todas las paginas 
del sitio web. 



Estas dos imageries han sido creadas con un programa de dibujo vectorial, como pueden ser Corel Draw™, 
Freehand™Kontour™, etc. y retocadas con un programa de retoque fotografico como pueden ser Photofinish™, 
Photoshop™, The GIMP™ o Paint Shop Pro™ (Shareware). 

Las fotos inferiores de la pantalla de presentacion han sido obtenidas de alguno de los numerosos cliparts de 
imagenes gratuftos de los cuales podemos encontrar en Internet una buena muestra. 

Programacion en HTML 

Una vez creadas las imagenes es hora de usarlas. El primer paso que seguiremos consistira en la creacion de una 
plantilla que servira como modelo para cada uno de las paginas. 

Es importante que las paginas de un sitio web sean similares o, dicho de otra forma, que tengan uniformidad. Eso 
le aportara una apariencia profesional y permitira al visitante, por ejemplo, identificar las paginas como de Los 
Alpes y no de ninguna otra agenda. 

La plantilla estara compuesta por el logo, el letrero de "Los Alpes Agenda de viajes" y de una firma de los 
creadores de la pagina. El codigo de esta plantilla es: 


<HTML> 

<HEAD> 

<TITLE> 

Agenda de viajes LOS ALPES 
</TITLE> 

</HEAD> 

<BODY> 

<A NAME="arriba"> 

<CENTER> 

<IMG SRC="img/logo.gif"> 

<IMG SRC="img/losalpes.gif"> 
</CENTER> 

Contenido de la pagina 
<HR> 

<ADDRESS> 

Web realizado por el equipo de 
<FONT COLOR="#800000"> 

Conquista la web 
</EONT> 


w 


<BR> 
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Ultima actualization: Enero de 2001 
</ADDRESS> 

:/HODY> 

</HTML> 


Una vez tenemos hecha esta plantilla la guardamos con el nombre p 1 ant i 11a. html para utilizarla posterior- 
mente con todos los documentos del sitio web. 

El siguiente paso es programar la presentacion, esta consta de un eslogan, una lista de enlaces a las secciones de 
la pagina y dos imagenes atractivas, todo ello centrado: 


<CENTER> 

<UL> 


<LI> 

<A HREF="mes.html"> 

Xuostras principales OFERTAS del aes 

</A> 


<LI> 

<A HREF="#alpes"> 

LOS ALPES - 20 anos a su setvicio. 

</A> 


<LI> 

<A HREF="#medida"> 

Viajes a su medida 

</A> 


<LI> 

<A HREF="#donde"> 

Donde er.cor.tra rr.os 

</A> 

</UL> 

<IMG SRC="img/ski.gif"> 

<IMG SRC="img/montafiaS.. gif "> 

</CENTER> 


Como vemos el primer link nos enlaza con el archivo mes. html mientras que el resto son enlaces a las anclas 
creadas al principio de cada section en el mismo index.html. 

El resto de detalles no entranan demasiada dificultad y el lector que haya seguido el curso desde el principio sera 
capaz de realizar la pagina completa sin problemas fijandose en las figuras incluidas. 

Como pista listaremos el resto de etiquetas y atributos (entre parentesis) usados en la pagina: 

HR (con WIDTH Y SIZE) , H3, BIG, STRONG, BLOCKQUOTE, CITE, 

P (ALIGN) , OL y PRE. 


w 
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El documento mes.html tampoco presenta ningun problema de realization. Cabe destacar que es importante 
incluir al final de este un enlace que nos devuelva a la pagina principal. 

Solo sera necesario comentar dos aspectos del codigo. Para separar las palabras enlaces a los distintos viajes se ha 
usado repetidamente la secuencia de escape &nbsp; de la siguiente manera: 


<A HREF="#Andorra"> 

ANDORRA 

</A> 

&nbsp;&nbsp;Snbsp; 
<A HREF="#Orlando"> 
ORLANDO 
</A> 


El segundo aspecto resenable es que para insertar cada una de las lrneas informativas de cada viaje se ha usado el 
siguiente codigo: 


<P ALIGN="center"> 
</P> 


No queda mas por comentar, recomendamos al lector la realization completa de esta practica para adquirir practica 
y soltura con las etiquetas HTML vistas hasta ahora con vistas a comprender mejor y mas rapidamente los 
siguientes capttulos en los que trataremos el codigo HTML avanzado. 
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Copyright Jorge Ferrer, Victor Garcia y Rodrigo Garcia. Se otorga permiso para copiar, distribuir y/o modificar 
este documento bajo los terminos de la Licencia de Documentacion Libre GNU, Version 1.1 o cualquier otra 
version posterior publicada por la Free Software Foundation. Puede consultar una copia de la licencia en: 
http://www.gnu.org/copyleft/fdl.html 

En este articulo se presenta todo el potencial que ofrece el lenguaje HTML para dar color y usar imagenes en una 
pagina web. Aprenderemos como especificar un determinado color de entre 16 millones posibles y ponerlo como 
fondo de la pagina, o como color del texto. Tambien veremos como manipular imagenes cambiando su tamano 
o poniendo texto a su alrededor. Despues se vera como controlar los hordes y tamano de las imagenes. Veremos 
como poner un texto alternativo a la imagen, crear imagenes con varias zonas activas (imagenes mapa) y como 
emplear GIFs animados. A1 terminar seremos unos expertos en el arte de las imagenes y el color en el WWW. 

Hasta ahora hemos aprendido a crear paginas WEB compuestas por texto, encabezados, diferentes estilos, e 
incluso a enlazar varias paginas entre si. Tambien hemos aprendido a insertar imagenes de una manera sencilla en 
una pagina. Sin embargo todavia podemos aprender mucho mas aprovechar todas las capacidades que nos ofrece 
el lenguaje HTML para convertir nuestra pagina en una obra de arte grafico. 

El exito o fracaso de un Web depende en muchas ocasiones del aspecto grafico que ofrezca a los visitantes. Un 
buen ejemplo de ello lo observamos en la pagina de Disney 


Figura 5.1. Aprovechando las capacidades del HTML para incluir colores e imagenes en 
un Web podemos conseguir resultados tan atractivos como el que observamos en el web 
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de Disney. 


Q Disney.com - The Web Site for Families - Microsoft Internet Explorer 




(jyefltuffi The Magazine for 




coral I 


[THE WEB SITE FOR FAM 


Direction | http://www. disnej^ 1 . com/ 


HIGHLIGHTS FOR FEBRUARY 15,1998 


Check it oat! 


TODAY @DISNEY: GO FOR THE GOALPOSTS! 

Tony Danza is an unlikely football hero on "Wonderful Wi 


*1 http: //www. disney. com/ddc^media/honr 
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TODAY! 


, que es una de las mas visitadas del WWW. 
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El diseno con programas de creacion de imagenes y de retoque fotografico esta fuertemente ligado a la creacion 
de paginas Web. Mas aun cuando nuestro objetivo sera, no solo crear una pagina atractiva, sino de calidad tecnica 
y que cargue en poco tiempo para no provocar esperas excesivas a a los visitantes. La manera de conseguir este 
objetivo sera un buen conocimiento del lenguaje HTML y de todas sus posibilidades, y por ello dedicaremos un 
buen numero de paginas a este tema, empezando por los siguientes temas: 


• Imagenes y colores de fondo: Extensiones de la etiqueta <body> 

• Imagenes inline: La etiqueta <img> 

• Alineamiento de imagenes. 

• Texto que envuelve a las imagenes 

• Como controlar el tamano de las imagenes 


Usando color en el WWW. 

Existen diversas etiquetas y atributos en HTML que permiten cambiar el color de los elementos de una pagina 
o incluso el color del fondo de esta. Pero antes de ver estas etiquetas es necesario explicar algunas cosas sobre 
como usar el color en las paginas Web. 

En el tercer capltulo ya adelantamos, cuando aprendimos a dar color al texto, que existlan dos metodos para indicar 
el color, estos metodos son: 


• Usar un numero hexadecimal que identifica a ese color, por ejemplo #FF0000 ser refiere al color rojo. 

• Usar uno de los nombres (en ingles) predeterminados por los navegadores para los colores mas usados, por 
ejemplo para poner, al igual que antes, el color rojo usarlamos: ’red’. 

Por supuesto para el programador es mucho mas sencillo aprenderse los nombres de los colores en ingles que no 
un codigo hexadecimal que nos resulta mucho mas extrano. Sin embargo usar nombre de colores tiene algunas 
limitaciones. Por un lado solo abarca unos pocos colores y por otro tiene el inconveniente de que no todos los 
navegadores son capaces de entenderlos, mientras que si entienden el codigo hexadecimal. Aun as! podemos 
encontrar 16 colores que son entendidos por gran parte de los navegadores y por supuesto tambien Netscape 
Navigator™ y Explorer™ que son los mas usados. 

En la tabla 5.1 podemos encontrar estos dieciseis colores junto con su nombre en ingles y el codigo hexadecimal 
asociado. 


T05~ 
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Figura tabla 5.1. Colores usados mas frecuentemente 


Negro 

Black 

#000000 

Elanco 

White 

#FFFFFF 

Verde 

Green 

#008000 

Marron rojizo 

Maroon 

#800000 

Verde oliva 

Olive 

#808000 

Azul marino 

Navy 

#000080 

Violeta 

Purple 

#800080 

Gris oscuro 

Gray 

#808080 

Rojo 

Red 

#FF0000 

Amarillo 

Yellow 

#FFFF00 

Azul 

Blue 

#000OFF 

Azul verdoso 

Teal 

#008080 

Verde lima 

Lime 

#0 OFF 00 

Azul claro 

Aqua 

#00FFFF 

Fusia 

Fuchsia 

#FF00FF 

Gris claro (plateado) 

Silver 

#cococo 


Aunque los nombres asignados a estos 16 colores son ampliamente aceptados en realidad existen muchos mas, 
pero su uso no es recomendado ya que solo Netscape los soporta. Entre estos otros colores estan indigo, ivory, 
khaki y muchos mas. 

El segundo metodo, basado en usar el codigo hexadecimal asociado al color no es tan complicado como puede 
parecer en un principio. Y tiene dos grandes ventajas sobre usar nombres: 


• Lo entienden todos los navegadores. 

• Puedes indicar mas de 16 millones de colores. 

Para construir el codigo de un color se usa un metodo que podemos comparar con el de un pintor con una paleta de 
tan solo tiene 3 colores y los mezcla para conseguir el resto de los que necesita para pintar un cuadro. En el codigo 
usado por el lenguaje HTML estos tres colores son el rojo, el verde y el azul, es decir, se usa la paleta RGB (Red, 
Green, Blue). Para crear todos los colores se usan mezclas de estos en distintas cantidades. Estas cantidades se 
indican con un numero del 0 al 255, correspondiendo el 255 a la maxima cantidad de color posible. Si ponemos 
cero de todos los colores obtendremos el color negro, si ponemos 255 de todos obtendremos el bianco. Para crear 
amarillo, por ejemplo, podemos mezclar 255 de rojo, 255 de verde y nada de azul; y si en vez de poner 255 de 
rojo y verde ponemos 230 de cada obtendremos un amarillo mas oscuro. 

Sin embargo todavia queda una complication y es que el numero tendremos que ponerlo en hexadecimal. 
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Nota 

Un codigo hexadecimal esta basada en una numeration que esta compuesta por 16 slmbolos en lugar de 
10 como el sistema decimal. Estos 16 slmbolos son 1, 2, 3, 4, 5, 6, 7, 8, 9, A (10), B (11), C (12), D 
(13), E (14) y F (15). Por ejemplo, el siguiente numero, el 16, se escribe en hexadecimal: ’10’, mientras 
que el numero hexadecimal ’ lF’se corresponde con el 31 decimal. 

Usando el codigo hexadecimal podemos indicar la cantidad de color del 0 al 255 con solo dos dlgitos (del 0 al 
FF), y una vez que nos hemos acostumbrado no resulta tan complicado. 

Nota 

Afortunadamente existen editores HTML que ponen automaticamente el numero hexadecimal de los 
colores. Tambien existen programas independientes como HTMLib Colour Wizard™ que permite 
indicar color en decimal o incluso seleccionarlo de una paleta y el te genera el codigo HTML. 

Para proseguir vamos a fijarnos en los codigos que adelantabamos en la tabla 5.1, como vemos todos empiezan 
por el slmbolo sostenido o almohadilla: ’#’. Posteriormente siguen 6 numeros (siempre deben ser seis) en 
hexadecimal. Los dos primeros corresponden a la cantidad de rojo (RR), los siguientes a la cantidad de verde 
(GG) y los siguientes a la cantidad de azul (BB). Es decir la estructura general es: 


tRRGGBB 


De ahora en adelante usaremos la cadena ’#RRGGBB’ para indicar un codigo de color en hexadecimal y debemos 
tener en cuenta que puede ser sustituido tambien por un nombre de color. 

Examinemos alguno de los codigos anteriores, por ejemplo el usado para obtener verde azulado (Teal). Este 
codigo indica que el color no tiene nada (0) de rojo, 128 unidades (80 en hexadecimal) de verde y otras tantas de 
azul. Con lo que obtenemos el tono deseado. 

Como cambiar la apariencia de una pagina. 

Una vez conocemos a la perfection la manera de insertar colores ya podemos empezar a aprovechar las 
posibilidades que nos ofrece el lenguaje HTML para controlar la apariencia de una pagina Web. Como primera 
aplicacion practica aprenderemos a cambiar el color del fondo, luego cambiaremos el color del texto y por ultimo 
crearemos el efecto mas impactante de todos, pondremos un imagen de fondo. 

Color de fondo. 

Para cambiar el color de fondo de nuestras paginas usaremos un nuevo atributo de la, ya conocida, etiqueta BODY. 
El nuevo atributo se llama BGCOLOR y debe ser anadido a la etiqueta BODY existente: 


cbody bgcolor="#RRGGBB"> 


Por ejemplo para crear una pagina con el fondo de color azul podemos usar: 


<body bgcolor- " = 0G00FF"> 


w 
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O bien: 


cbody bgcolor="Blue"> 


El resultado es en ambos casos el que podemos apreciar en la figura 5.2 

Figura 5.2. El lenguaje HTML nos permite cambiar el color de fondo de nuestras paginas. 
Podemos indicar el color por su nombre en ingles o con su numero RGB. 


Color de fondo - Microsoft Internet Explorer 


Archivo Edicion Ver Ir a Favoritos Ayuda 
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Direccion 


Pagina con color de fondo azul: 
<BODY BGCOLOR="#OOO0FF"> 
<BODY BGCOLOR="Blue"> 


Mi PC 


NOTA: Algunos navegadores, como Explorer™, permiten poner el codigo en decimal. Para ello hay que omitir 
el slmbolo # y usar 3 dlgitos decimales (numeros del 0 al 255) para especificar la cantidad de cada color en el 
mismo orden (rojo, verde y azul). Sin embargo no recomendamos el uso de esta caracterfstica porque de esta 
forma provocaremos que solo los visitantes con ese navegador puedan apreciar el colorido de nuestras paginas y 
realmente el esfuerzo de poner el codigo en hexadecimal no es tan grande. 

Es importante resaltar que si no usamos el atributo BGCOLOR el color de fondo de nuestras paginas sera el 
que cada usuario haya especificado en su navegador. En algunos navegadores el color por defecto es el bianco, 
mientras que en otros es el gris plateado habitual en Windows™. 


Color del texto y Links. 
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Igual que se puede cambiar el color del fondo de la pagina se puede cambiar el color de su texto. Para ello se usan 
cuatro nuevos atributos de la etiqueta BODY. Lo primero que deberemos hacer es pensar en el color y el codigo 
de este, y una vez lo tengamos cambiaremos el color del texto usando: 


TEXT Sirve para controlar el color que tendra el texto normal de la pagina, es decir todo 

aquel que no sea un enlace hipertexto. Su valor por defecto es negro. 

LINK Permite cambiar el color con el que son mostrados los enlaces hipertexto o links de 

la pagina. Su valor por defecto es azul. 

VLINK Permite cambiar el color por defecto de los links visitados (Visited LINK). Los 

links visitados de una pagina son aquellos que ya hemos seleccionado alguna vez. 
El valor por defecto de estos enlaces es morado. 

ALINK Sirve para controlar el color de los enlaces activos (Active LINK). El significado de 

enlace activo varfa en funcion del navegador. Para Netscape™ un enlace activo es 
aquel sobre el que se ha pulsado con el raton pero todavla no se ha soltado. El color 
por defecto de los links activos es el rojo. 

Vistas todas las etiquetas pasemos a crear un ejemplo, para el seleccionaremos un color de pantalla negro, texto 

bianco, enlaces verdes, enlaces visitados verde azulado y enlaces activos rojos. El codigo usado es por tanto: 


<body bgcolor="#OOCtO0O" text="#FS!|iSi# , V 
link="#00FF00" vlink="#008080" alink="#FF0000"> 


En la figura 5.3 podemos ver el resultado de este codigo. 
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Figura 5.3. Tambien podemos cambiar el color del texto, de los enlaces, de los enlaces 
visitados y de los enlaces activos a nuestro gusto, igual que haciamos con el fondo. 



Imageries de fondo: 

Las posibilidades que nos ofrece el lenguaje HTML para cambiar la apariencia de una pagina no se limitan a 
cambiar los colores, tambien se pueden poner imagenes ya sean dibujos o fotos como fondo de una pagina. Las 
imagenes deberan estar en formato GIF o JPEG al igual que las imagenes normales que aprendimos a insertar en 
el capltulo 2. 

Para incluir una imagen de fondo deberemos usar el atributo background de la etiqueta body. Como habra 
podido comprobar el lector a estas alturas dentro de esta etiqueta se engloban todos los parametros que cambian 
las caracterfsticas globales de la Web, es decir aquellas que afectan a toda la pagina. 

El funcionamiento de background es identico al del atributo SRC de la etiqueta img, esto es, deberemos indicar 
como valor el nombre de la imagen, junto con su ruta de directories (path) si es necesario o bien la direction 
completa de Internet (URL) si no se encuentra en nuestro sitio Web. 

Veamos un primer ejemplo de una pagina con una imagen de fondo, para ello usamos el siguiente codigo en el que 
hemos usado la imagen fondo l. jpg que se encuentra en el mismo directorio que la pagina donde esta el codigo: 
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<body background="fondol.jpg"> 


En la figura 5.4 podemos ver el resultado en el que hemos incluido, ademas, un encabezado que contraste con el 
fondo. 

Figura 5.4. Para crear un mayor impacto visual podemos usar como fondo una imagen, 
esta imagen se replicara (es puesta en mosaico) por toda la pagina, luego los bordes deben 
coincidir. 



Las imagenes que insertemos como fondo de la pagina seran mostradas en mosaico, es decir, se replicara la imagen 
tanto horizontal como verticalmente hasta ocupar todo el area de la pagina. Por esta razon no todas las imagenes 
quedan bien como fondo de una pagina Web. De hecho se recomienda que solo se usen dos tipos de imagenes: 


Imagenes con pocos colores que muestran un logo sobre un relleno solido y que interfiere poco con el 
contenido de la pagina. En la Web de la figura 5.5 podemos ver un ejemplo de este tipo de imagenes en 
la que no se aprecian los bordes de la imagen al ser el fondo de esta de un solo color solido (gris oscuro en 
este caso). 
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Figura 5.5. En esta ocasion la imagen de fondo es un logo sobre un fondo de color 
solido (gris). Esta es una manera sencilla para que no se noten los bordes cuando el 
navegador la pone en mosaico. 



1 Imageries especiales cuyos bordes encajan perfectamente y parece que todo del fondo es una unica imagen. 
La imagen de la figura 5.4 es un ejemplo de ello ya que su tamano real es de 90x90 pixeles. En la figura 5.6 
vemos esa imagen por si sola. Es diflcil apreciar que los bordes encajaran cuando se creen las replicas, de 
hecho ese efecto debe ser hecho con programas especiales. 

Figura 5.6. Esta es la imagen usada como fondo en la pagina de la figura 5.4. Como 
vemos, es de pequeno tamano, pero al coincidir sus bordes Simula una imagen que 
ocupa toda la pantalla. 
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Por lo general la creacion de fondos requiere ademas de programas especiales, bastante cuidado para asegurarnos 
que no sobrecarguen demasiado la pagina, por lo que un gran numero de programadores de Webs optan por usar 
alguno de los fondos de los cliparts gratuitos que podemos encontrar en Internet, por ejemplo en las direcciones: 


• www.specialweb.com 

• www.dewa.com 

• www.teleportcom 

Si usamos una imagen normal como fondo de una pagina, los bordes no encajaran y se veran claramente los llmites 
de la imagen. Podemos ver un ejemplo de este efecto en la figura 5.7. En esta misma figura vemos tambien que 
poner una foto de fondo suele provocar que la pagina este demasiado sobrecargada, ademas serfa diflcil leer el 
texto que hubiese en esa imagen. 

Figura 5.7. Tambien podemos poner fotos como fondo de la pagina, pero hay que tener 
cuidado porque los bordes no encajan y ademas la pagina queda demasiado sobrecargada. 



Direction 


Pagina con 


de fondo 


Q Imagen de fondo - Microsoft Internet Explorer 
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Sugerencia 

No use imagenes demasiado oscuras o con demasiados colores como fondo de la pagina. Si aun as! debe 
usarla utilice los atributos text, link, vlink y alink de la etiquetas body para poner colores de texto 
que permitan que el texto sea legible. 

Por ultimo, queremos terminar este apartado con un consejo. Como hemos repetido, la creacion de imagenes de 
fondo es complicada y delicada. Si no las hemos hecho nosotros deberemos elegir bien, en general suelen ser 
mas apropiadas las imagenes con tonos claros sobre los que se puede leer sin problemas texto negro. Pero antes 
de incluir la imagen deberemos volver a hacernos unas preguntas <;Es realmente necesaria? ^Mejora realmente 
el aspecto grafico? que con frecuencia nos hacen ver las cosas mas claras. Una vez hemos probado la imagen 
debemos tener mucho cuidado y hacer pruebas con otras personas para comprobar que el texto de la pagina se lea 
bien. Piense que por muy espectacular que sea la pagina, si no conseguimos que lea lo que tenemos que decir el 
objetivo no estara cumplido. 

Imagenes en las paginas Web. 

En el segundo capltulo: ’Nuestra primera pagina Web’, aprendimos a insertar imagenes en una Web. Ahora 
empezaremos recordando brevemente aquel capltulo, para continuar con las distintas tecnicas que nos ofrece 
el lenguaje HTML no solo para incluir imagenes, sino para manejarlas, cambiar su apariencia o controlar su 
disposition respecto a los demas elementos de la pagina. 

Insertando Imagenes. 

Recordemos que para insertar una imagen en una pagina Web era imprescindible guardarla en un archivo 
independiente del documento HTML. Dicho archivo podia contener la imagen en varios formatos, siendo los 
de mayor uso GIF y JPEG que pueden ser vistos con la practica totalidad de navegadores. Cuando tenemos una 
imagen con estos formatos suelen tener la extension . gif en el caso del formato GIF y . jpg o . jpeg en el caso 
de imagenes JPEG. 

Atencion 

Algunas aplicaciones de retoque de imagenes guardan las imagenes GIF y JPEG con la extension en 
mayusculas (.GIF, JPEG). Esta terminacion es valida, pero los nombres de los archivos que contienen 
imagenes, igual que los de los documentos HTML, son sensibles a mayusculas/minusculas y por tanto 
.gif no es lo mismo que .GIF con lo que al referirnos al archivo debemos escribir su nombre y 
terminacion respetando las mayusculas y minusculas. Si las hemos confundido cuando probemos las 
paginas en el ordenador local probablemente funcionen, pero dejaran de hacerlo cuando las publiquemos, 
es decir, cuando las pongamos en el servidor Web. 

Nota 

El formato de una imagen es el codigo usado para almacenarla en un archivo. Los formatos simples 
simplemente guardan una tabla con el color de cada punto de pantalla (pixel) de la imagen. Sin embargo 
si guardamos una imagen grande con este formato ocupara demasiado. Por esta razon se crearon formatos 
mas complicados basados en complejas formulas matematicas, que consiguen reducir el tamano de la 
imagen. GIF y JPEG son ejemplos de estos formatos. Los navegadores usan la extension (los tres/cuatro 
ultimos caracteres tras un punto) de los archivos para averiguar el formato en que estan codificadas, si 
cambiamos manualmente esa extension no tendran esa information y la imagen no podra ser visualizada. 

Es importante resaltar cambiando la extension de una imagen no cambiamos el formato de dicha imagen, pero 
podemos dejarla inutil. 


Mas adelante trataremos a fondo estos dos formatos y comentaremos cuando es conveniente usar uno u otro. 
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Una vez tenemos la imagen en un archivo aparte (por ejemplo img.gif) con el formato adecuado insertamos la 
imagen usando la etiqueta img de la siguiente manera: 






Como ya comentamos, esta etiqueta consta de una unica instruction. Pero aunque solo vimos uno de sus atributos, 
SRC, contiene muchos mas que iremos estudiando a lo largo del capltulo. 

Pero antes de comenzar a ver nuevos conceptos... 

Imageries y texto. 

Cuando insertamos una imagen esta se situa justo en el lugar donde esta la etiqueta img independientemente de si 
hay texto alrededor o no, por esta razon este tipo de imagenes reciben el nombre de imagenes en llnea o imagenes 
inline. Usando esta caracterfstica podlamos insertar imagenes pequenas como si fuesen parte de un parrafo. 

Si queremos insertar una imagen en el interior de un elemento de nivel de bloque, pongamos por ejemplo un 
encabezado, no tendremos mas que poner la etiqueta en el interior de ese elemento (entre las instrucciones de 
inicio y fin). Si no lo hicieramos asl, despues de la imagen se producirfa un salto de llnea antes del encabezado. 
Para entender esto mejor podemos fijarnos en la figura 5.8 y comparar entre los siguientes codigos: 


ny 
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Figura 5.8. Podemos apreciar la diferencia entre insertar una imagen dentro del 
encabezado o insertarla /uera, en cuyo caso queda en la linea superior. 



<img src="imagenes/chistera.gif"> 

<h2>LA CHISTERA-Humor y magia</h2> 

<h2> 

<img src="imagenes/chistera.gif">LA CHISTERA-Humor y magia</h2> 


que nos resultaran familiares de la primera practica. 

Como vemos, en el primer caso la instruction de inicio del encabezado, <h2>, provocara una salto de lmea y el 
efecto no sera el deseado. En el siguiente caso hemos incluido la etiqueta IMG dentro del encabezado, es decir, 
estamos diciendo al navegador algo asl: ’el encabezado consta de esta imagen y este texto’. En este caso, como 
resulta totalmente logico, el resultado es el deseado. 

Aun asl el ejemplo anterior no resuelve todos los problemas que podrfan plantearse al insertar imagenes. Como 
ya vimos en un ejemplo del capltulo 2 (fig. 2.9), que ahora reproducimos en la figura 5.9 cuando las imagenes 
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son pequenas pueden incluirse junto con el texto sin problemas, pero ^que ocurre si queremos insertar una imagen 
de dimensiones mayores? Podemos usar el metodo anterior, pero entonces obtendrfamos resultados como el de la 
figura 5.10, que sin duda no es el deseado y provoca que el texto sea diflcilmente legible. 

Figura 5.9. Como veiamos en el fasciculo 2 (fig. 2.9) cuando la imagen es pequena puede 
entremezclarse con el texto sin problema. 
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Figura 5.10. Cuando la imagen es grande, al insertarla en una linea de texto esta queda 
muy separada de la lmea anterior en lugar de envolver la imagen. 



Una opcion para solucionar este problema es provocar un salto de llnea antes y despues de la imagen, tal y como 
haclamos en la practica 2 para las imagenes de la pagina de presentation. Podemos usar diversas etiquetas para 
conseguir los saltos de llnea: p, center, blockquote, br, etc. por ejemplo: 


<p> 

<img src="montanas.html"> 
</p> 

<center> 

<img src="montanas.html"> 
</center> 
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Sin embargo no siempre nos conformamos con esto. Habitualmente lo que queremos es que la imagen se inserte 
junto con el texto y que este se situe alrededor suyo, tal y como vemos en periodicos u otras publicaciones. De esta 
forma podrfamos conseguir el efecto de la figura 5.11. Afortunadamente es posible conseguir ese efecto usando 
las capacidades de alineamiento de imagenes del HTML. 

Figura 5.11. Con las tecnicas de alineamiento del lenguaje HTML que estudiamos en este 
capitulo podemos crear interesantes efectos como texto envolviendo a una imagen. 



Nuestro viaje a los alpes 


Pasadas tres semanas desde 
nuestra partida al fin llegamos 
al lugar que llevabamos tanto 
tiempo echando de menos. 
Desde las montanas perdidas 
de aquel extrano lugar 
pudimos observar un paisaje 
que nos seria dificil olvidar. 
Las montanas increiblemente 
cubiertas de meve incluso en 
aquella epoca del ano y el 
suelo tan verde y uniforme que podria haber sido us ado como una alfombra 
natural nos hicieron prometer que volveriamos el ano siguiente. 

BIC Mi pc 



Alineamiento de imagenes. 

En los ejemplos vistos al principio, en los que insertabamos imagenes junto con texto normal, la parte inferior de 
la imagen quedaba alineada con la parte inferior del texto. La etiqueta img tiene un atributo llamado align que 
nos permite controlar el alineamiento vertical de la imagen en funcion del texto que le rodee o de otras imagenes 
de la misma llnea. El atributo align puede tomar cinco valores diferentes. En primer lugar veremos aquellos 
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que nos permiten controlar la alineacion vertical de la imagen. Para cada uno de ello mostraremos dos ejemplos, 
en ambos la imagen que sera alineada es un cuadrado rojo con una llnea que marca su centro. En el primero la 
imagen ira seguida de tres llneas de texto y en el segundo ira precedida de una imagen el doble de alto que marcara 
los llmites verticales de la llnea. 


align=top: Alinea la parte superior de la imagen con la parte superior de la llnea. Para 

determinar cual es el llmite superior de la llnea se tendran en cuenta todos los 
elementos de esta (ya sean texto, imagenes u otros), tanto los anteriores como los 
posteriores a la imagen que estamos insertando. En la figura 5.12 podemos ver dos 
ejemplos de align=top. El primer caso es sencillo de entender, pero el segundo 
requiere alguna explication. La primera imagen se alinea (por defecto) con su parte 
inferior a la misma altura que la base del texto, despues nuestro cuadrado rojo, alinea 
su parte superior con la parte superior de dicha imagen. 

Figura 5.12. Ejemplos de align=top. En el primer caso la parte 
superior de la imagen coincide con la del texto y en el segundo con 
la parte superior de la imagen azul. 
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align=middle: 



Alinea el centra (vertical) de la imagen con el centra de la llnea. Si la llnea esta 
compuesta unicamente por texto el se tomara la base de este como centra de la 
llnea. Si hay mas elementos el navegador calcula cual es el centra de la llnea en 
funcion de todos ellos. En la figura 5.13 podemos ver unos ejemplos. 

Figura 5.13. Ejemplos de align=middle. En el primer caso el 
centro de la imagen coincide con la base del texto, en el segundo 
intenta centrarse con la imagen azul. 
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align=bottom: 



Alinea la parte inferior de la imagen con la parte inferior de la llnea de texto. En 
este caso no se tendran en cuenta otros elementos a parte del texto para realizar el 
alineamiento. De nuevo podemos ver ejemplos de este alineamiento en este caso en 
la figura 5.14. 

Figura 5.14. Ejemplos de align=bottom. En ambos casos la 
parte inferior de la imagen se alinea con la base del texto, aunque 
la imagen azul baje por debajo. 
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NOTA: Es posible que nos encontremos alguna pagina en la que haya una imagen con el atributo align=center. 
Este nuevo valor (center) solo funciona con Internet Explorer™ y tiene el mismo significado que 
align=middle y ademas su nombre puede confundirnos y creer que la imagen se mostrara como si es- 
tuviese encerrada por la etiqueta <center>..</denter>. Por estas dos razones recomendamos el uso de 
align=middle en su lugar. 

Estos tres son los unicos tipos de alineamiento que inclula el lenguaje HTML en sus orfgenes. Sin embargo, 
aunque son utiles, no nos permiten controlar la disposition de las imagenes tanto como querrlamos. Por ejemplo, 
todavla no podemos insertar una imagen y que el texto la bordee tal y como velamos en la figura 5.11. De hecho en 
todos los valores anteriores solo la primera llnea de texto introducida despues de la imagen se situaba a la derecha 
de esta, aunque esta llnea estuviese en la parte superior de la imagen como ocurrfa en el primer caso de la figura 
5.12. La segunda llnea y las siguientes serfan mostradas debajo de la imagen. 

Texto que envuelve a las imagenes o alineamiento horizontal. 
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Vista la necesidad de nuevos metodos de alineamiento se crearon dos nuevos valores para el atributo align: left 
y right, que nos permitiran controlar el alineamiento horizontal de las imagenes (esto es, izquierda o derecha). 
Estos valores se han convertido en los mas usados de las paginas Web por su enorme utilidad. En seguida veremos 
como funcionan. 

NOTA: Las imagenes pueden alinearse vertical y horizontalmente, pero nunca a la vez. Esto es as! porque ambos 
tipos de alineamiento usan el atributo. align, y solo puede incluirse uno de estos atributos dentro de la etiqueta 
img. Si ponemos mas el navegador se quedara con el primer valor e ignorara el resto. 

Antes es necesario hacer una matizacion. Aunque en un capltulo proximo estudiaremos con mas detenimiento las 
diferentes versiones del lenguaje HTML, adelantaremos que los tres primeros valores estudiados: top, middle 
y bottom, pertenecen al estandar HTML 2.0. Sin embargo los dos nuevos valores que vamos a explicar fueron 
introducidos en la version HTML 3.2. El lector se preguntara [,y para que quiero saber yo eso? Pues bueno, todos 
los navegadores entienden HTML 2.0, pero alguno no entiende HTML 3.2 y por tanto no entenderan a 1.: i ef-_ 

ni align=right. Sin embargo no debemos preocuparnos en este caso, ya que es diflcil a estas alturas encontrar 
un navegador que no soporte HTML 3.2 y por tanto podremos estar casi seguros que nuestros visitantes disfrutaran 
de nuestras imagenes alineadas. 

Por otro lado aquellos visitantes de la pagina que usen un navegador muy antiguo veran lo mismo que si no 
hubiesemos puesto el atributo align, pero no tendran ningun otro problema, por tanto concluiremos que podemos 
usar los nuevos valores sin demasiada preocupacion. 

Y despues de esta matizacion pasamos ya a explicar el significado de estos atributos. 


align=left La palabra left significa, en ingles, izquierda, por tanto al usar este valor la imagen 

se situa a la izquierda de la pagina. Pero su efecto es aun mas importante, ya que si 
a continuacion de la imagen introducimos texto o cualquier otro elemento del Web 
este rodeara a la imagen, no pasara a la siguiente llnea. 

Como es importante entender bien el significado de esta etiqueta para usarla ade- 
cuadamente vamos a explicar mas detenidamente como reacciona un navegador 
cuando se encuentra una imagen alineada a la izquierda entre un parrafo de texto: 
en primer lugar se pasa a la siguiente llnea y se inserta la imagen, alineada, como 
hemos dicho antes, a la izquierda. Despues si el navegador se encuentra con mas 
texto y queda sitio en la llnea anterior a la imagen lo rellena con ese texto, cuando 
se acabe la llnea seguira mostrando el texto en las llneas sucesivas, rodeando la 
imagen. En la figura 5.15 podemos ver un ejemplo de su funcionamiento. Como 
vemos aunque insertamos la etiqueta img tres la palabra imagen tras insertar esta el 
texto posterior a esta etiqueta sigue mostrandose como si la imagen no hubiera sido 
insertada. 



Imageries y color en el WWW 


align=right 


Figura 5.15. Alineando una imagen a la izquierda con 
aiign=ieft conseguiremos que el texto envuelva a la imagen. 


Q ALIGN=LEFT - Microsoft Internet Explorer 


||Archivo Edicion Ver Ira Favoritos Ayuda _j['Direc 

^ ^ ^ ^ 0 g m 

CODIGO: 

...la iniagen<IHG SRC= rr img. gif " ALIGN= rr LEFT rr >, 
alineada,... 

Como es importante entenderbien el sigmficado de esta etiquet 
us aria adecuadamente vamos a explicarmas detemdamente coi 
reacciona un navegador cuando se encuentra una imagen aline a 
izquierda entre un parrafo de texto: en primer lugar se pas a a la 
siguiente line a y se inserta la imagen, aline ada, como hemos did 

■ antes, a la izquierda. De spues si el navegador se encui 
con mas texto y que da sitio en la line a anterior a la im; 
rellena con ese texto, cuando se acabe la line a seguira 
Imostrando el texto en las lineas sucesivas, mostrando la imagen 
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Probablemente el lector ya haya deducido que este otro valor sirve para indicar 
que la imagen estara alineada a la derecha (right significa precisamente derecha 
en ingles). El efecto provocado por align=right es identico al anterior, solo que 
ahora la imagen se situara a la derecha de la pagina y el texto la bordeara por la 
izquierda. En la figura 5.16 podemos apreciar el mismo codigo de la figura 5.15 
pero cambiando el alineamiento de la imagen. 

Figura 5.16. Usando align=right conseguimos igualmente que 
el texto envuelva a la imagen pero ahora esta se situara a la 
derecha de la pagina. 
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Q ALIGN=RIGHT - Microsoft Internet Explorer 


|Archivo Edicion Ver Ira Favoritos Ayuda _jj'Direc 
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CODIGO: 

...la iniagen<IHG SRC= rr img. gif " ALIGN= rr RIGHT rr > f 
alineada,... 

Como es importante entender bien el sigmficado de esta etiquet 
us aria adecuadamente vamos a explicarmas detemdamente coi 
reacciona un navegador cuando se encuentra una imagen aline a 
izquierda entre un parrafo de texto: en primer lugar se pas a a la 
siguiente line a y se inserta la imagen, aline ada, como hemos did 
antes, a la lzquierda. De spues si el navegador se encuentra 
con mas texto y queda sitio en la line a anterior a la imagen lo I 
rellena con ese texto, cuando se acabe la line a seguira ^ 

jmostrando el texto en las lineas sucesivas, mostrando la imagen 


NOTA: Existen otros modos de alineamiento, pero no funcionan en todos los navegadores, ni forman parte del 
lenguaje HTML. Esos modos de alineamiento han sido creados por los fabricantes de un determinado navegador 
y por tanto no funcionan con el resto. En posteriores capltulos hablaremos de este tema y de otras extensiones de 
los navegadores y comentaremos los otros tipos de alineamiento existentes. 

Como terminar el texto envolvente. 

En la figura 5.11 adelantabamos un ejemplo de como quedaba una imagen con texto que envolviendola. En ese 
caso usabamos una fotografla de tamano considerable, y por tanto habla numerosas lineas de texto a su izquierda. 
Despues de la primera frase pusimos un punto y aparte, que como ya sabemos, se hace en HTML con la etiqueta 
<br>, y continuamos: "Desde las...". 

Pero podemos imaginar otro caso, como el de la figura 5.17 en el que lo unico que queremos es escribir unas pocas 
lineas que comenten la imagen pero continuar el resto del texto despues (debajo) de la imagen. Si ponemos br 
sin mas pasaremos a la siguiente llnea, pero no al final de la imagen. Un primer metodo que se nos podrfa ocurrir 
para conseguir este efecto serla poner la etiqueta br muchas veces, tantas como lineas quepan hasta el final de la 
imagen. Sin embargo este sistema a parte de ser molesto, no funciona como puede comprobar el lector si decide 
probarlo. 
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Figura 5.17. Usando el atributo clear de la etiqueta br podemos terminar el texto 
envolvente y seguir escribiendo debajo de la imagen. 



Pero entonces ^existe alguna otra forma de conseguirlo? La respuesta es SI. Cuando se anadieron los valores 
right y left a los modos de alineamiento se introdujo tambien un nuevo atributo en la etiqueta br que nos 
permitiera tratar con este tipo de alineamiento. Ese atributo se llama clear, puede tomar los siguientes valores. 


left Provoca un salto de lfnea hasta el primer margen libre a la izquierda. Esto quiere 

decir que provocara un salto hasta la primera lfnea en la que no hay una imagen a la 
izquierda y por tanto se usa, en general, cuando hay una imagen alineada a ese lado. 
Este valor es el que hemos usado en el ejemplo de la figura 5.17. Su modo de uso 
es el siguiente: 
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<br ciaae='left> 


right Provoca un salto de llnea hasta el primer margen libre a la derecha, por lo demas 

funciona identicamente al valor anterior: 


<br 


clear=right> 


all Provoca un salto hasta la primera llnea que tiene tanto el margen izquierdo como 

el margen derecho libres. Es decir provoca el efecto de los dos valores anteriores 
combinados. 


Ya empezamos a sentir que tenemos una gran control sobre la disposition de las imagenes en nuestra pagina, pero 
aun podemos manejar un parametro mas en relation a estas y al texto que las envuelve: el espaciado que hay entre 
ellas. 

Margeries alrededor de las imagenes. 

Para poder controlar los margenes se crearon dos nuevos atributos mas para la etiqueta img: vspace y hspace 
que controlan el tamano de los margenes vertical (vspace proviene de Vertical SPACE que significa espaciado 
vertical) y horizontal (hspace proviene de Horizontal SPACE, espaciado horizontal) respectivamente. Estos 
atributos suelen acompanar al uso de align=left y align=right. 

El tamano de los margenes se indicara en pixeles (puntos de pantalla). Veamos ahora un ejemplo con amplios 
margenes para que podamos apreciar bien el efecto de estos atributos. El codigo usado es: 


< i me al.tgh 'left vspace 35 hspace 35> 


Y podemos ver el resultado en la figura 5.18 
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Figura 5.18. Usando los atributos hspace y vspace podemos controlar la separation 
entre la imagen y el texto que la envuelve. 



Imageries enlace. 

A estas alturas del curso de HTML dominamos la creacion de enlaces hipertexto y conocemos como insertar 
imagenes en nuestras Web. Uniendo ambos conocimientos vamos a crear imagenes que nos serviran como enlaces 
a otros lugares del World Wide Web. 
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No sera necesario aprender nada nuevo, lo unico que necesitaremos es combinar los efectos de las etiquetas a 
y img. En primer lugar deberemos insertar la instruction de inicio de a, despues incluir la etiquequeta img y 
por ultimo insertamos la etiqueta de fin de a. Un ejemplo muy tlpico del uso de imagenes enlace, como suelen 
ser denominadas, son las flechas para avanzar o volver atras en una pagina. En nuestra practica del capltulo 
pasado usamos estas flechas pero solo como indication de el resultado de pulsar sobre el texto adjunto. Ahora 
convertiremos esas imagenes en enlace para que se pueda pulsar sobre ellas. El codigo a usar es: 


<img src="img/izda.gif"> 
</a> 


Invitamos al lector a que haga el mismo cambio en el resto de imagenes usadas en aquella practica. 

Invitamos al lector a que haga el mismo cambio en el resto de imagenes usadas en aquella practica. 

Figura 5.19. Combinando las etiquetas img y a adecuadamente podemos crear imagenes 
enlace. Los navegadores indican esto mostrando un borde azul alrededor de estas 
imagenes. 



Nuestro siguiente objetivo sera aprender a controlar este borde as! como crear otros muchos efectos con las 
imagenes. 

Como cambiar la apariencia de las imagenes 

Borde de las imagenes 

El lenguaje HTML permite recuadrar a las imagenes que incluyamos en nuestras paginas con un borde de grosor 
variable. En general este borde es invisible, a nos ser que especifiquemos lo contrario. Sin embargo cuando vimos 
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las imageries enlace observamos que alrededor de estas imagenes aparecla un borde azul indicando que se podia 
pulsar sobre ellas. Como enseguida veremos que es posible conseguir que las imagenes normales SI tengan ese 
borde y que las imagenes enlace no lo tengan o que sea de otro grosor distinto al que aparece por defecto. 

La manera de controlar el borde es usar un nuevo atributo, BORDER , que debe ser usado dentro de la etiqueta IMG. 
Este atributo toma como valor el numero de pixeles que debe tener el borde. Si nuestro objetivo no es anadir un 
borde sino quitarlo, o asegurarnos que no lo tendra debemos usar BORDER=0. De esta forma podremos conseguir 
que desaparezca el borde en las imagenes enlace. En la figura 5.20 podemos ver tres ejemplos de imagenes enlace: 

Figura 5.20. Las imagenes enlace tienen un borde azul por defecto, pero podemos quitarlo 
o variar su grosor usando el atributo BORDER de la etiqueta IMG. 



En el primero de ellos no hemos usado el atributo BORDER: 


<A HREF="otra.htm"> 
<IMG SRC="izda.gif"> 
</A> 


En el segundo lo hemos usado dandole el valor cero para eliminar el borde: 


<A HREF="otra.htm"> 

<IMG SRC="izda.gif" BDRDER=D> 
</A> 


TTT 
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Y en el tercero le hemos dado el valor 10: 


<A HREF="otra.htm"> 

<IMG SRC="izda.gif" BORDER=10> 
</A> 


El uso de BORDER=0 es especialmente util en los llamados iconos de navegacion. Estos iconos son imagenes 
enlace que incluimos en las paginas y que suelen tener la apariencia de botones, flechas y similares y cuya funcion 
es ayudar al visitante a navegar por nuestra pagina. En la figura 5.21 podemos ver varios de estos iconos. En todos 
estos casos la aparicion de un borde alrededor de la imagen peijudicana su apariencia. 


Figura 5.21. Las imagenes enlace se usan a menudo para crear iconos de navegacion como 
los que aqui vemos. En estos casos es conveniente quitar el borde usando BORDER=0. 




Sin embargo no debe parecer que el atributo BORDER solo tiene utilidad en las imagenes enlace, ya que podemos 
usarlo con todo tipo de imagenes y en ocasiones nos ayuda a crear interesantes efectos. En la figura 5.22 podemos 
ver ejemplos de imagenes normales sin borde o con borde de distinto grosor. 
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Figura 5.22. Las imagenes normales tambien pueden tener un borde de grosor variable, 
aunque en este caso el color no es azul, sino negro. 



En estos ejemplos observamos que si las imagenes no son links el borde es negro en vez de azul. No existe por 
ahora ningun medio de elegir el color del borde. 

Pero ademas de poder anadir un borde a las imagenes, el HTMLnos permite realizar alguna otra modification en 
la apariencia de las imagenes mas importante aun, como puede ser modificar su tamano. De esta forma podremos 
usar una misma imagen varias veces y con diferentes tamanos en una pagina Web sin tener crear un archivo GIF 
o JPG diferente para cada una. 

Modificando el tamano de las imagenes 

Tanto las imagenes GIF como las JPEG son imagenes rectangulares, esto es, su tamano esta determinado 
unicamente por dos propiedades: su anchura y su altura. Tanto una como otra suelen tener valores dados en 
pixeles o puntos de pantalla. 

El lenguaje HTML nos permitira modificar estas propiedades de las imagenes a incluir en una pagina de manera 
que podamos adaptarlas al tamano que necesitemos. La forma de hacer realidad esta transformation es usar dos 
nuevos atributos de la etiqueta IMG: WIDTH y HEIGHT, que significan en ingles anchura y altura respectivamente. 
A cada uno de estos atributos deberemos darle un tamano en pixeles que suele oscilar entre 20 y 600 en los casos 
habituales. 

Existen dos formas de usar estos atributos. La primera de ellas consiste en dar valores tanto a WIDTH como 
a HEIGHT con lo cual estaremos determinando por completo el tamano con el que el navegador debe mostrar 
la pagina. El otro metodo consiste en usar solo uno de ellos, o bien WIDTH o bien HEIGHT. Al hacer esto la 
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dimension que no usemos se adaptara para mantener la proportion de la imagen. Por ejemplo, si tenemos una 
imagen de 500x250, es decir de anchura 500 y de altura 250, pero al insertarla en la pagina usamos el siguiente 
codigo: 


<IMG SRC="imagen.gif" WIDTB=250> 


La imagen sera mostrada por el navegador con una tamano de 250x125. Como vemos la relation entre la anchura 
y la altura sigue siendo la misma, y por tanto la imagen no aparecera deformada. Si lo que querfamos era conseguir 
un tamano de 250x250 deblamos haber escrito el siguiente codigo: 


<IMG SRC="imagen.gif" WIDTHS 50 HEIGHT=250> 


En la figura 5.23 hemos usado una imagen de tamano original 290x192 y la hemos aplicado diferentes transfor- 
maciones. 
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Figura 5.23. Usando los atributos WIDTH y HEIGHT podemos variar el tamano de las 
imagenes. Si solo usamos uno la otra dimension se ajusta para mantener las proporciones. 


0 Tamano de las imagenes - Microsoft Internet Explorer 
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Imagen original (290X192) 


WIDTH=145 


WIDTE 

HEIGI 


Listo 
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En la primera de ellas hemos fijado una anchura mitad de la original usando WIDTH=145, pero sin incluir el 
atributo HEIGHT. En este caso la altura se ajusta automaticamente a 96 pixels (la mitad del original) para que 
se mantengan las proporciones. En la siguiente imagen hemos usando los dos atributos, tanto HEIGHT como 
WIDTH con lo cual obtenemos una imagen con las dimensiones deseadas, pero deformada, ya que no se mantienen 
las proporciones originales. 

En general no se usan los atributos WIDTH y HEIGHT para obtener imagenes de mayor tamano que el original, 
ya que el resultado obtenido tendrla muy poca calidad. El lector puede hacer la prueba. 

Nota 

El metodo que usan la mayorfa de los navegadores para reducir el tamano de las imagenes consiste en 
eliminar bias y columnas completas de pixeles elegidas aleatoriamente. Para aumentar el tamano se 
duplican bias y columnas elegidas de manera igualmente aleatoria. Este metodo es usado por su rapidez, 
pero en ocasiones la calidad ofrecida no es la deseable, especialmente si en la imagen hay texto. Por 
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esta razon si es importante una buena visualizacion de la imagen conviene usar un programa de retoque 
fotografico para modificar el tamano de la imagen en vez de usar los atributos WIDTH y HEIGHT. 

Vamos a terminar esta seccion dedicada a cambiar la apariencia de las imagenes de una pagina Web con un 
interesante truco. Gracias a el conseguiremos una visualizacion mas rapida de nuestras paginas. La idea es 
simple, y consiste en incluir SIEMPRE el tamano de las imagenes con los atributos WIDTH y HEIGHT (es 
necesario incluir los dos) al insertar una imagen en la pagina. Este truquillo que parece inocente en un principio 
tiene dos importantes ventajas: 


1. Los navegadores cuando les llega una imagen calculan sus dimensiones para saber como deben mostrarlas, al 
darselas directamente con el codigo ganaremos el tiempo que el navegador perderfa realizando este calculo. 

2. La segunda, y quiza mas importante ventaja, consiste en que el navegador podra colocar todos los elementos 
de la pagina desde un principio sin esperar a que lleguen las imagenes. Para entender porque ocurre esto es 
necesario aprender un poco mas sobre el funcionamiento del protocolo HTTP. Sin adentrarnos en detalles 
muy tecnicos diremos que los navegadores, cuando se les pide una pagina, cargan (o bajan) del WWW el 
archivo HTML con el codigo. Tras leerlo y mostrar el texto empiezan a cargar los archivos con las imagenes. 
Cuando llega una imagen el navegador la coloca en su sitio, pero como no sabla cuanto iba a ocupar de 
antemano probablemente le habla dejado un espacio demasiado pequeno, con lo cual es necesario recolocar 
todos los elementos de la pagina, ;y esto ocurre con cada imagen! Al incluir los tamanos de las imagenes 
en el codigo el navegador reserva el espacio adecuado y evita tener que recolocar todo sucesivas veces con 
el consiguiente ahorro de tiempo. En la figura 5.24 podemos ver la pagina de la practica 2 antes tras leerse 
el codigo, pero antes de mostrar las imagenes. Como vemos, el navegador (Explorer ™en este caso) ya ha 
reservado el tamano para las imagenes que quedan por llegar. 


Figura 5.24. Si incluimos junto con la imagen la informacion de sus dimensiones el 
navegador podra reservar espacio para ellas con solo leer el codigo. 
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» Viajes a su medida 
Donde encontramos 



En ocasiones este ahorro de tiempo es considerable, por lo que nuestra recomendacion es que, sin duda, merece 
la pena usar este truco. Para averiguar el tamano de las imagenes podemos recurrir a programas de retoque 
o visualization de imagenes como Paint Shop Pro™ (Shareware) o IrfanView™(Freeware), aunque los mas 
modernos editores de HTML como FrontPage™o HomeSite™ realizan esta labor por nosotros. 

Alternativas a las imagenes inline 
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El atributo ALT 

Hasta ahora hemos hablado de la importancia de las imageries y el diseno grafico en general en el World Wide 
Web. Sin duda la abundancia de graficos y otros contenidos multimedia han provocado su gran expansion. Sin 
embargo, como ya hemos comentado antes a lo largo de esta obra, existen algunos navegadores que solo son 
capaces de mostrar texto. Tambien hemos mencionado e incluso hemos mostrado imageries del mas conocido y 
usado: Lynx™. Quiza el lector se haga aun la pregunta /.porque querrla alguien acceder al WWW para ver solo 
texto? Las razones pueden ser de distinto tipo, pero podemos encontrar dos que tienen gran importancia. La 
primera consiste en que es posible que el navegante acceda a la red desde su trabajo o desde el laboratorio de una 
universidad donde los equipos son todavla antiguos o trabaja con terminales conectados a una estacion de trabajo, 
que solo son capaces de mostrar texto, en estos casos es obligatorio usar un navegador en modo texto . Otra razon 
puede ser que aun teniendo un magnlfico ordenador (y monitor) ultimo modelo, queramos acceder al WWW a toda 
velocidad para acceder a cierta informacion, en este caso los navegadores modo texto son enormemente utiles ya 
que alcanzan velocidades mucho mayores. 

Sea como fuere nuestra labor como programadores de paginas Web sera conseguir que nuestras paginas puedan 
ser visitadas por todo el mundo. De esta manera tendran mas exito. Por ello debemos ofrecer alternativas a las 
imagenes que incluimos en nuestras paginas. 

El atributo ALT, de la etiqueta IMG, permite especificar un texto altemativo que sera mostrado por los navegadores 
en caso de que la imagen no pueda ser vista. Ese texto sera introducido entrecomillado como valor del atributo 
ALT, de la siguiente forma: 


<IMG SRC="montanas.gif" 

ALT="Fotografia de unas montanas nevadas de 
los Alpes"> 


Las razones por las que una imagen puede no ser mostrada son diversas pero las podemos agrupar en tres: 


1 El primer caso es el anteriormente comentado de navegadores en modo texto. En este caso es necesario hacer 
un comentario especial. Cada vez que el navegador se encuentra con una imagen (es decir con una etiqueta 
IMG en el codigo HTML ) en vez de mostrarla la sustituye por el siguente texto: [IMAGE] (image significa 
imagen en ingles). Sin duda esta palabra no es muy descriptiva, y ademas es la misma para todas las imagenes. 
Para solucionarlo el programador puede usar el atributo ALT, en ese caso el texto [IMAGE] sera sustituido 
por el que se indique como valor de este atributo, que sin duda explicara mejor el contenido de la imagen. En 
ocasiones es conveniente usar el atributo ALT sin ningun texto (ALT="") para evitar la aparicion de [IMAGE], 
pero esto no debe hacerse muy a menudo. 

1 Un segundo caso puede ser que el usuario haya decidido desactivar la opcion de ver las imagenes de las 
paginas. Tanto Explorer™ (en Opciones de Internet/Opciones avanzadas/Multimedia) como Netscape™ (en 
Preferences/Advanced) ofrecen esta opcion. Si ponemos un texto alternative suficientemente descriptivo el 
visitante podra decidir si merece la pena cargar la imagen o no. 

1 Un tercer caso ocurre cuando hay un problema en la transmision de la imagen o porque se ha indicado 
un nombre incorrecto. En este caso los navegadores muestran un slmbolo grafico acompanado del texto 
alternativo. En la figura 5.25 podemos ver este caso con Explorer™ y Netscape™, donde hemos usado el 
codigo anterior usando el atributo ALT para que sea mostrado un texto alternativo. 
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Figura 5.25. Con el atributo ALT podemos especificar un texto alternativo a las 
imagenes. En esta figura vemos como lo muestran Explorer™ y Netscape™. 



En prevision de todos estos casos el uso del atributo ALT en las paginas que programemos es mas que 
recomendable. De esta forma estaremos dando calidad a nuestras paginas y estaremos mostrando que nos 
preocupamos por todo tipo de audiencia. 

Para terminar hemos de decir que los navegadores Internet Explorer™ y Netscape™ dan un segundo uso al atributo 
ALT. Este consiste en mostrar su contenido en forma de bocadillo cuando el usuario situa el puntero del raton 
encima de la imagen tal y como podemos ver en la figura 5.26: 






































Imageries y color en el WWW 


Figura 5.26. Algunos navegadores como Explorer™ muestran el texto de ALT como un 
bocadillo que aparece cuando ponemos el cursor encima de la imagen. 



en la que hemos modificado el codigo usado en la practica 2 para anadir el atributo ALT: 


<IMG SRC="img/logo.gif" 
ALT="Logotipo de la compania"> 


Si bien el uso del atributo ALT ofrece un interesante metodo para ofrecer una altemativa a las imagenes con un 
texto existe otro con una utilidad mucho mas amplia y que consiste en usar, en lugar de las imagenes inline vistas 
hasta ahora, las llamadas imagenes externas. 

Imagenes externas 

Estas imagenes no se visualizan junto con el resto de la pagina, sino que se proporciona al visitante un enlace para 
que pueda acceder a ellas. Las razones por las que en ciertas ocasiones se usan la imagenes externas y por las que 
merece la pena mencionarlas aqul son muchas, pero las podemos resumir en cuatro: 


1 La gran mayorfa de navegadores graficos soportan los formatos GIF y JPEG, y algunos de ellos soportan algun 
otro formato pero no es lo habitual. Sin embargo gran parte de los navegadores, graficos o no, soportan un 
rango mucho mas amplio de formatos de imagenes con la ayuda de aplicaciones externas, por lo que usando 
imagenes externas podremos usar otros formatos distintos de GIF y JPEG y el navegador se encargara de 
llamar a la aplicacion que necesite para visualizarlo. 
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• Como hemos comentado repetidas veces los navegadores en modo texto no pueden mostrar imagenes inline , 
sin embargo si pueden mostrar imagenes extemas ayudandose de algun programa de visualization o edition 
grafica. 

• Mientras las imagenes inline deben tener un tamano reducido para no provocar grandes esperas al navegante al 
visitar nuestra pagina, las imagenes externas pueden ser de mayor tamano ya que solo las veran aquellos que lo 
pidan y por tanto hemos de suponer que les interesa lo suficiente como para esperar. En todo caso si el tamano 
supera los 100 Kbytes es conveniente indicar dicho tamano entre parentesis junto con el texto identificativo de 
la imagen. 

• Nos ofrece la posibilidad de combinar imagenes inline con imagenes externas para que las paginas se carguen 
mas rapidamente. De esta forma crearemos los llamados thumbnails que veremos con mas detalle un poco 
mas adelante. 

La creacion de imagenes externas varfa de las vistas hasta ahora en que ya no se usa la etiqueta IMG. A cambio 
haremos uso de la etiqueta de creacion de links: <a . .. > </a>, pero en esta ocasion lo enlazado no sera otra 
pagina HTML sino la propia imagen externa. El codigo que debemos usar es: 


<A HREF="imagen.xxx n < 
imagen externa 
</A> 


siendo xxx la extension correspondiente al formato de la imagen. En la tabla 5.2 podemos ver algunos formatos y 
extensiones comunmente usados. 

Figura 5.2. Extensiones y breve description de los principales formatos de imagenes 
usados en el WWW. 


FOBMA 

ro|EXTENSK 

5n|| breve descripcion | 

|gif 

■gif 

Imagen de 256 colores sinperdidas 

|lPEG 

■Jpg, Jpeg 

Imagen de 16 millones de colores. Conperdidas 

|bmp 

|.bmp 

Imagen bitmap de Windows y OS/2 

|XBM 

|.xbrn 

Imagen bitmap de UNIX 

|PICT 

|.pict 

Imagen Bitmap de Macintosh 

|PNG 

■png 

Portable Network Grafics: 16 millones de colores 

TIFF 

[tif 

Baja compresion pero gran calidad 

|XPM 

.xpm 

Imagen de Paintbrush 
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Cuando el visitante pulse sobre el texto activo, en este caso ’imagen externa ’ el navegador bajara la imagen de 
Internet y luego la mostrara o ejecutara otra aplicacion que pueda mostrarla. 

Aunque hasta ahora hemos usado los links para enlazar otras paginas HTML y en este mismo apartado para insertar 
imagenes extemas en realidad la utilidad de esta etiqueta va mucho mas alia. De hecho podemos enlazar a nuestra 
pagina cualquier tipo de archivo, en la mayorfa de los navegadores actuales cuando el usuario selecciona un enlace 
a un archivo que ellos mismos no pueden visualizar le ofrece dos opciones: guardar el archivo en el disco duro o 
llevar a cabo una action en funcion del tipo de archivo. Esta ultima option consiste en ejecutar el archivo si es 
ejecutable, usar un programa descompresor si es un archivo comprimido, visualizarlo con un programa adecuado 
si es un video, etc. 

Thumbnails 

Como hemos adelantado antes, con este nombre se conoce al resultado de la combination de imagenes inline con 
imagenes externas. El objetivo de los thumbnails es proporcionar una previsualizacion, un aperitivo, de la imagen 
completa (que sera externa) usando una imagen inline de menor tamano. Esta imagen inline es, de hecho, la que 
recibe el nombre de thumbnail, y sera o bien una version de dimensiones reducidas de la imagen final o una parte 
de ella. En general, o bien el propio thumbnail, o bien un texto adjunto (o ambas cosas) serviran como enlace para 
obtener la imagen completa tal y como podemos ver en la figura 5.27. 


W 



Imageries y color en el WWW 


Figura 5.27. Ejemplos de Thumnails. En el primer caso se muestra un trozo de la imagen 
y en el segundo la imagen completa reducida, el efecto es similar en ambos casos. 
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Ballena atacando a gaviotas 

• Ballena.gif Formato GIF 050 KK) 

• Ballena.jpg: Formato JPEG (AS Kb~) 


Ballena atacando a gaviotas 

• Ballena.gif Formato GIF (150 Kb) 

• Ballena.jpg: Formato JPEG (48 Kb~) 




que muestra dos ejemplos de thumbnails de la imagen completa de la figura 5.28. 
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Figura 5.28. Imagen completa que sera mostrada cuando el visitante seleccione los enlaces 
que acompanan a los thumbnails de la figura 5.27 



Como vemos, el uso de thumbnails permite al visitante si decide cargar la imagen completa elegir entre el formato 
GIF, de mayor tamano y calidad, o en formato JPEG con calidad ligeramente peor pero mucho menor tamano. 
Sobre las imagenes de aperitivo hay que decir que en el primer caso se ha usado un trozo de la imagen mientras 
que en el segundo se ha usado la imagen entera que ha sido reducida en tamano con un programa de edicion 
de imagenes. En ambos casos el tamano de la imagen a quedado reducido a unos 15-20Kb que las hace mas 
apropiadas para incluirlas como imagenes inline. 
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Aviso 

Es importante resaltar que para la creation de thumbnails no se pueden usar los atributos WIDTH y 
HEIGHT ya que se perderfa su utilidad. El objetivo del thumbnail es tener una imagen en un archivo 
aparte que sea de menor tamano en bytes que la original para que cargue mas rapido. A1 usar WIDTH 
y HEIGHT la imagen sigue siendo la misma, y por tanto su tamano tambien, luego no conseguiremos 
reducir el tiempo de carga. 

El uso apropiado imagenes extemas y de thumbnails nos permitira crear paginas de gran contenido grafico y de 
pequeno tamano. 

Imagenes mapa 

Empezamos a adentramos ya en algunas de las caracterfsticas mas avanzadas del lenguaje HTML. En este caso es 
el turno de las imagenes mapa. 

Con bastante probabilidad el lector habra visitado alguna pagina en la que habia alguna imagen en la que se podia 
pulsar en diferentes partes para acceder a diferentes destinos. Estas son las llamadas imagenes mapa y en la gran 
mayoria de paginas Web podemos encontrar una. En un principio para realizar las imagenes mapa era necesario 
usar determinados programas especiales que debian estar en el servidor Web, sin embargo con el estandar HTML 
3.2 se incluyeron algunas etiquetas HTML que nos permitiran realizar estas imagenes mapa con mayor facilidad. 

Imagenes mapa en el servidor 

Este era el unico metodo usado inicialmente para crear las imagenes mapa, para usarlo debemos instalar en el 
servidor Web (si tenemos acceso a el) algun programa dedicado a este fin. Los mas usados son los del CERN y 
NCSA. Para usar este metodo debemos llevar a cabo los siguientes pasos: 


1. Crear un archivo de configuration del mapa con el codigo del programa usado para indicar las zonas activas 
y donde nos dirigiran el pulsar sobre ellas. Para averiguar como es el codigo a usar tendremos que leer 
la documentation que acompane al programa, pero en general no sera muy complicado. El archivo con el 
codigo tiene en general la termination ’ .map’. 

2. Escribir el codigo HTML de manera que la imagen sea un enlace al archivo con su codigo. Ademas debemos 
incluir el atributo ISM A Pen la etiqueta IMG: 


<A HREF="img,map"< 

<IMG SRC="img.gif" ISMAP> 
</A> 


En la pagina de POST-IT, figura 5.29, podemos ver un ejemplo de imagen mapa en el servidor. 
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Figura 5.29. En la pagina principal de POST-IT vemos un excelente ejemplo de la utilidad 
de las imagenes mapa. 



En este caso la imagen representa una mesa con diferentes objetos encima cada uno de los cuales representa una 
section del sitio Web al que saltaremos si pulsamos sobre el. 

La gran ventaja de este metodo consiste en que funcionara con cualquier navegador, el unico requisite es tener el 
programa en el servidor Web. El principal inconveniente es que, por lo general no todo el mundo tiene acceso al 
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servidor Web y no puede instalar los programas que necesita, por otro lado tener el codigo del mapa en un archivo 
aparte complica su modificacion. 

Para resolver estos problemas aparecio el segundo metodo en el que el codigo de todas las imagenes mapa de una 
pagina podran estar en esa misma pagina y ademas se creara usando etiquetas del lenguaje HTML. 

Imagenes mapa en el cliente 

Este tipo de imagenes reciben el nombre de imagenes mapa en el cliente porque sera el navegador de cada usuario 
(cada cliente) el que se encargara de leer el codigo cuando se pulsa sobre la imagen mapa y averiguar la direccion 
de destino. No es necesario ningun programa especial en el servidor Web. 

En este caso nos bastara usar la etiqueta IMG para crear la imagen, eso si con un nuevo atributo: USEMAP . Por 
otro lado ahora deberemos usar algunas otras etiquetas nuevas para crear el mapa de la imagen. La creacion de 
este tipo de imagenes mapa consta por tanto de dos pasos: 


1. Definicion de la imagen como imagen mapa, as! como informar de donde esta el mapa a usar. La sintaxis es 
sencilla: 


<IMG SRC="imagen.gif" 
USEMAP="#mapal"> 


La imagen es, en este caso, una con formato GIF de nombre imagen. gif. En este ejemplo usamos un mapa 
llamado mapal, como vemos la forma de referirnos a el es igual que con las anclas: anteponiendo el slmbolo 
’#’. En esta ocasion el mapa estara en el mismo documento HTML, pero esto no tiene porque ser asl. Si, por 
ejemplo, usamos una imagen mapa en todas y cada una de las imagenes de un sitio Web, podemos poner el 
mapa en la pagina principal (index. htm) y despues referirnos a el como: 

D1 


< IMG SRC= " imagen. g : t.% 
USEMAP="index.htm#mapa1"> 


Mas aun, no estamos limitados a que el mapa este en nuestro sitio Web, puede estar en cualquier lugar del 
WWW, para referirnos a el tendremos que poner la direccion URL de la pagina donde este seguido por un # 
y el nombre del mapa. 
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2. El segundo paso es la creacion del mapa. Para ello usaremos una nueva etiqueta: MAP. Esta etiqueta tendra 
una instruction de inicio, <map ... > , y otra de fin, < /map > entre las cuales definiremos las diferentes zonas 
activas de la imagen mapa. El unico atributo de esta etiqueta es el necesario para darle un nombre: NAME, 
y se usara de la siguiente manera: 


<MAP NAME="mapal"> 
</MAP> 


A continuation debemos crear las formas a las que nos referfamos antes. Para llevar a cabo esta labor 
usaremos otra etiqueta mas: AREA que debera ser una vez para cada zona de la imagen mapa y que consta 
de cuatro atributos: 


• HREF: Este atributo es identico al del mismo nombre de la etiqueta A. Con el debemos indicar la pagina 
o direction URL a la que saltaremos cuando pulsemos sobre esta zona activa. 

• ALT: Sirve para incluir un texto alternativo. 

• SHAPE: Define la forma de la zona, puede tener tres valores: rect (zona rectangular), circle (zona 
circular) y poly (zona poligonal). 

• COORDS: Coordenadas de la zona, su valor depende de la forma de esta. En la figura 5.30: 

Figura 5.30. En esta figura podemos ver los valores que puede tomar el atributo 
COORDS en funcion de si la zona es rectangular, circular o poligonal. 
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podemos ver como sera en funcion de si el valor de SHAPE es... 


• reel: COORDS toma 4 valores separados por comas que representan las coordenadas de el vertice 
superior izquierdo y el inferior derecho. 

• circle: COORDS toma 3 valores. Los dos primeros son las coordenadas del centra y el tercero es el 
radio. 

• poly: COORDS tiene un numero indefinido de valores que representan las coordenadas de cada uno 
de sus vertices. 

Como ejemplo vamos a imaginar una imagen de 300x100 y vamos a crear un mapa que la divida en dos: 


<MAP NAME="mapa2"> 

<AREA SHAPE="rect" 
COORDS ”0,0,150,100" 
HREF="iz da.htm"> 


<AREA SHAPE="rect" 
COORDS="150,0,300, 
HREF="dcha.htm"> 


No ha sido complicado, ^no? 

Nota 

Las coordenadas vistas hasta ahora estan dadas en pixeles. Tambien pueden darse en porcentajes, 
aunque esto solo suele ser util para el caso de zonas rectangulares. La sintaxis a usar serfa por ejemplo: 
COORDS="0,0,50%,40%" 

Existe un quinto atributo, NOHREF, que puede usarse en lugar de HREF para indicar que una determinada zona 
no debe conducir a ningun sitio al pulsar sobre ella. Este atributo no toma ningun valor. 

Si dos o mas zonas se superponen se impone la que fuera definida primero. Por esta razon si existe alguna zona 
con NOHREF suele ponerse la primera de la lista. 

El problema las imagenes mapa en cliente radica en que no todos los navegadores estan preparado para este tipo 
de imagenes mapa, y por tanto no podemos estar seguros de que todos los vistantes vayan a poder disfrutar de 
nuestra imagen mapa. 

Nota 

Siempre que usemos una imagen enlace y especialmente si esta es una imagen mapa es importante crear 
esos mismos enlaces con textos para que se pueda acceder a ellos con navegadores de solo texto o por si 
existe algun problema con la visualization de las imagenes. 
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Aviso 


Hay que tener mucho cuidado con el uso de los atributos WIDTH y HEIGHT con las imagenes mapa, 
ya que la imagen variara sus dimensiones, pero el mapa no, por tanto las zonas que hayamos definido no 
serviran. 

EJERCICIO 5.1: Llegados a este punto queremos proponer un ejercicio sencillo a los lectores. Este consistira en 
la creacion de un mapa para la imagen de la figura 5.31: 

Figura 5.31. Imagen mapa que puede sustituir el menu en forma de lista de la pagina de 
la agenda de viajes Los Alpes. 



incluida en el archivo e j5-l. zip, y usarla para sustituir el menu creado con una lista en la pagina de la agenda 
de viajes Los Alpes creada en la practica 2. Ademas habra que proporcionar enlaces en modo texto alternativos a 
la imagen (lo habitual es que esten en una sola llnea. En el mismo archivo (extra. zip) se ofrece una solucion a 
este ejercicio. 


Mejoras en las imagenes 


Tanto el formato GIF como el formato JPEG pueden ser vistos con casi la practica totalidad de los navegadores. Sin 
embargo ^Cuando es conveniente usar uno y cuando es conveniente usar el otro?, <;Puedo convertir las imagenes 
de un tipo a otro?, iQue ventajas ofrece cada uno?. Conocer las respuestas a estas preguntas nos permitira 
usar de una manera mucho mas eficiente y profesional las imagenes en nuestras paginas. En este apartado 
nos dedicaremos a responderlas y veremos las ultimas novedades del formato GIF que permite crear imagenes 
transparentes e imagenes con movimiento. Para terminar comentaremos algunos consejos para aprovechar al 
maximo y eficientemente las posibilidades del HTML en lo que a las imagenes se refiere. 


Formatos GIF y JPEG 


El formato GIF (Graphics Interchange Format, Formato de intercambio de graficos) fue creado por CompuServe 
con el objetivo de que fuese entendido por todo tipo de ordenadores. La primera version de este formato es 
actualmente conocida como GIF87 y sus principales caracterfsticas son: 

• Limitada a 256 colores, si usamos menos la imagen tendra menor tamano. 

• Compresion sin perdidas. 
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Lo que le convierte en un formato idoneo para logos, iconos e todo tipo de dibujos con colores solidos. Poco 
despues aparecio una segunda version del formato conocido como GIF89a que anadla las siguientes caracterfsticas: 


• Posibilidad de crear imagenes con entrelazado. 

• Transparencia. 

• Imagenes con movimiento. 

Actualmente los principales problemas del formato GIF es su limitacion 256 colores, su mala compresion de 
fotograflas y que esta patentada por CompuServe, que quiere empezar a cobrar por su uso 

El formato JPEG (Joint Photographic Experts Group) fue creado por un grupo de expertos en fotografla por lo 
que esta pensado especialmente para este tipo de imagenes. Sus principales caracterfsticas son: 


• Puede almacenar 16 millones de colores. Ademas, al contrario de lo que ocurrfa con el formato GIF, el tamano 
es independiente del numero de colores usados. 

• Ofrece un algoritmo de compresion que reduce grandemente el tamano de las fotograflas. 

• Esta compresion produce perdidas, es decir, la imagen sufre deterioro. 

Esta ultima caracterlstica es el gran contratiempo que tiene el formato JPEG pero en la mayorla de las ocasiones 
es inapreciable. Al comprimir una imagen en formato JPEG se puede elegir un nivel de compresion de 1 a 99. 
Cuanto mayor sea este nivel mayor sera la compresion pero tambien habra un mayor deterioro de la serial. En la 
figura 5.32: 
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Figura 5.32. Mientras que el tamano de la imagen JPEG es mucho menor la perdida de 
calidad apenas es apreciable. 



Imagen con formato GIF Imagen con formato JPEG 

Tamano = 13 Kb Tamano = 3.6 Kb 


podemos ver una comparacion entre la imagen de la ballena en formato GIF y formato JPEG con un nivel 
de compresion 80 (lo habitual es 20). Existe perdida de calidad, pero no es muy apreciable, mientras que la 
disminucion de tamano es impresionante y para imagenes de mayor tamano la diferencia es aun mayor. 

Una vez conocidas las caracterfsticas de los dos formatos ha llegado el momenta de decidir cuando es conveniente 
usar uno y cuando es conveniente usar el otro. Por lo general: 


• Conviene usar GIF si la imagen es pequena y hay pocos colores, con mayor motivo aun si hay bloques de la 
imagen con todos los pixels del mismo color, como ocurre en los logos y dibujos similares. 

• Es recomendable usar JPEG siempre que la imagen sea muy grande y/o tenga muchos colores como sucede 
en las fotograflas. 

EJERCICIO 5.2: Llegados a este punto podemos darnos cuenta que en la practica 2 usamos el formato GIF 
en algunas fotograflas y que el resultado hubiese sido mucho mejor usando el formato JPEG. Este segundo 
ejercicio tendra como objetivo usar un programa de retoque fotografico para convertir de formato estas imagenes 
(montanas.gif y ski. gif). Los programas que pueden usarse para llevar a cabo este proposito son muchos: 
PhotoShop™ y Paint Shop Pro™ son una buena muestra de ellos. En el archivo e j5-2. zip se incluyen las dos 
imagenes ya convertidas con un nivel de compresion 60. De esta forma hemos conseguido reducir montanas. gif 
de 13 Kb a 6’5 Kb y ski .gif de 10 Kb a 4’6 Kb. Aunque en un principio puede parecer poco cuando una pagina 
tiene bastantes imagenes escogiendo adecuadamente el formato de cada uno conseguiremos que cargue mucho 
mas rapido. 

Ademas de GIF y JPEG existen otros formatos que no son usados habitualmente en el WWW, pero merece la pena 
comentar los formatos que entienden los dos principals navegadores: 
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• Netscape™ soporta los formatos de imageries GIF, JPEG, XPM y XBM. 

• Explorer™ soporta los formatos GIF, JPEG, PNG y BMP. 

Entre todos estos hay uno que destaca: PNG (Portable Network Graphics), porque representa el futuro de los 
formatos de almacenamiento de imageries y combina las ventajas de GIF y JPEG junto con otras nuevas: 

• Buena compresion tanto para logos como para fotos. 

• Posibilidad de transparency y entrelazado. 

• 16 Millones de colores. 

• Compresion sin perdidas. 

• Capacidad de anadir comentarios e informacion extra junto con la imagen. 

El formato PNG esta pensado como un sustituto para el formato GIF, ya que JPEG seguira siendo mejor con las 
fotograflas. Por otro lado todavla habra que esperar algun tiempo para que sea ampliamente aceptado. Aquellos 
lectores interesados en el tema pueden obtener mas informacion al respecto en las siguientes direcciones: 


•http://www.boutell.com/boutell/png 
• http://quest.jpl.nasa.gof/PNG/ 


Transparencia, Entrelazado y GIFs animados 

Estas son las tres principales caracterfsticas que fueron anadidas al formato GIF en la revision GIF89a. Vayamos 
una por una: 


Las imagenes transparentes consisten simplemente en elegir un color de la imagen que no sera pintado 
por el visualizador (en nuestro caso sera el navegador) al mostrarla. El uso de imagenes transparentes es 
especialmente util cuando usamos una pagina con fondos. Por ejemplo, en la figura 5.33: 
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Figura 5.33. En ocasiones, especialmente si usamos una imagen como fondo, se 
consigue un efecto mucho mejor haciendo que nuestras imagenes sean transparentes. 
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podemos ver la imagen de Los Alpes con transparencia y sin transparencia en una pagina con una imagen de 
fondo. En general las unicas imagenes que podemos considerar como candidatas a convertirse en imagenes 
transparentes son aquellas con un color de fondo dominante. Si intentaramos hacer transparente una fotografla 
los resultados no serfan los deseados. 

1 Las imagenes entrelazadas son imagenes muy similares a las normales. La unica diferencia radica en la manera 
en que se va mostrando la imagen en el navegador segun llega. Cuando un navegador carga una imagen normal 
va mostrandola desde el principio y va avanzando hacia abajo. Las imagenes entrelazadas por el contrario se 
muestran al principio como una imagen borrosa que se va aclarando segun la imagen termina de llegar, esto 
ocurre por el metodo especial de almacenamiento que se usa en este tipo de imagenes. El entrelazado es 
especialmente util cuando se aplica a las imagenes mapa, ya que en ocasiones no es necesario ver la imagen a 
la perfection para elegir una option. 

1 La tercera novedad del formato GIF89a es probablemente la que mas exito ha tenido. Como el lector ya 
ha adivinado estamos hablando de las imagenes animadas o GIFs animados. En los primeros anos del 
WWW la unica forma de tener una animcion en nuestras paginas consistla en usar un applet (programilla) 
de Java™o similar, con los inconvenientes que esto representaba. Con la aparicion de los GIFs animados 
todo se simplified, estos en realidad no son mas que varias imagenes en formato GIFalmacenadas en un unico 
archivo y que se van alternando ordenadamente para crear el efecto de la animation. Cada una de estas 
imagenes deben ser creadas por separado y despues juntadas con algun programa especial como Microsoft 
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Gif Animator™, GIF Movie Gear™, etc. Otra manera de obtener imagenes es acudir a las numerosas 
paginas de internet con colecciones de estas imagenes a nuestra disposition. En el directorio publico 
DMOZ puede encontrarse una gran cantidad de enlaces a estas paginas en su section de GIFs animados 
[http://dmoz.org/Computers/GraphicsAVeb/Free/Animated_GIFs/]. 


Nota 

No es conveniente usar muchas imagenes animadas en una misma pagina. Primero porque ocupan 
bastante tamano, segundo porque pueden ser mareantes para el visitante y tercero porque provocaran 
que el navegador vaya muy lento si el ordenador no tiene mucha memoria. Por estas razones nuestra 
recomendacion es usar un maximo de 2 imagenes animadas por pagina. 

EJERCICIO 5.3: Este es el ejercicio final de este largo capltulo dedicado a las imagenes y al color en las paginas 
Web. En el pretendemos que el lector aplique los conocimientos que ha adquirido para mejorar el aspecto grafico 
de las paginas que creamos en la practica 2. En concreto proponemos los siguientes cambios: 


• Poner un fondo en ambas paginas. El fondo debe ser preferiblemente de tonos claros para que se pueda leer el 
texto con facilidad. Si es necesario deberemos cambiar el color de este para facilitar la legibilidad. 

• Hacer que tanto los enlaces normales y los visitados sean de color verde y los activos morados. 

• Anadir los tamanos de las imagenes con los atributos WIDTH y HEIGHT. 

• Incluir un texto alternative (ALT) en todas y cada una de las imagenes. 

• Anadir alguna imagen externa en los viajes con temas relacionados con el destinos. 

• Mejorar el aspecto grafico general con ideas propias del lector. 

• Usar adecuadamente los tipos de imagenes para conseguir una pagina con gran contenido grafico de un tamano 
total (el documento HTML y todas las imagenes) de 40 Kb o menor. 

En el archivo clip. zip [extra/clip.zip] se ofrecen algunas imagenes que pueden ayudar a realizar este ejercicio 
y en el archivo pract2++. zip [extra/pract2++.zip] se muestra una posible solution a este de la que podemos ver 
un anticipo en la figura 5.34. 
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Figura 5.34. Aspecto final de la pagina de Los Alpes despues de aplicar los conocimientos 
sobre imagenes que hemos adquirido en este capltulo. 
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Creacion de tablas HTML 

Jorge Ferrer 
Victor Garcia 
Rodrigo Garcia 

Version 1.0 

Copyright Jorge Ferrer, Rodrigo Garcia y Victor Garcia. Se otorga permiso para copiar, distribuir y/o modificar 
este documento bajo los terminos de la Licencia de Documentation Libre GNU, Version 1.1 o cualquier otra 
version posterior publicada por la Free Software Foundation. Puede consultar una copia de la licencia en: 
http://www.gnu.org/copyleft/fdl.html 

Con su aparicion las tablas y revolucionaron el diseno de las paginas web. Las tablas eran una herramienta 
perfecta para organizar datos de manera ordenada, pero su utilidad no se queda ahi, ya que escondiendo los 
hordes podremos usarlas tambien para definir la estructura de las paginas. En este capitulo aprenderemos todas 
las etiquetas y atributos que existen en el lenguaje HTML estandar para la creacion de tablas y realizaremos 
numerosos ejemplos y ejercicios para ir cogiendo practica, que es, al fin y al cabo, lo mas importante a la hora de 
sacar el maximo partido a las tablas. 

Armados con nuestros conocimientos sobre la etiqueta table y despues de haber realizado unos cuantos ejemplos 
simples para practicar, dedicaremos el resto del capitulo a la realization de dos practicas. Con ellas nos daremos 
cuenta de las grandes posibilidades que nos ofrecen las tablas en el diseno de paginas Web. 

Con lo que hemos visto hasta ahora la disposition de los elementos de una pagina web es aun harto dificil. Tras 
estudiar los metodos de alineamiento empezamos a adquirir un mayor control sobre ellos, pero sin duda fueron las 
tablas las que van a damos una mayor flexibilidad para decidir la disposition de los elementos en una pagina. En 
un principio las tablas pueden servir para mostrar una serie de datos de una manera ordenada, tal y como estamos 
acostumbrados a ver en numerosas situaciones, sin embargo las tablas en la web tienen una utilidad aun mayor. 
Podemos hacer que toda nuestra pagina, o una parte de ella, sea una tabla e ir colocando los diferentes elementos 
de los que conste en sus celdas. De esta forma sabremos con gran precision donde estamos colocandolas. En la 
pagina de GNOME Hispano, figura 7.1, podemos ver un excelente ejemplo de ello. 
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Creadon de tablas HTML 


Figura 7.1. En el web de GNOME Hispano encontramos multitud de elementos, graficos 
y texto, con una disposition muy cuidada. <,Como lo hacen? Con tablas. 
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GNOME Hispano 


Bienvenido al web de GNOME Hispano, un lugar en la 
red donde el proyecto GNOME se aoerca a los usuarios 
hispanohablantes. 


La intencidn de este web es, primero, promocionar el 
proyecto GNOME en todos los ambitos, y, segundo, 
intentar servirde punto de entrada al proyecto para los 
usuarios/desarrolladoresque lo deseen. De hecho, 
ponemos especial hincapiG en animar a losque se&is 
programadores paraque entrSis en el desarrollo de 
aplicaciones para el proyecto GNOME , y para ello, 
disponemosde listasde correo y de un servidor CVS en 
el que albergar los proyectosque se vayan creando 
dentrode la comunidad G/VOMEhispanohablante. 
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Un inconveniente de las tablas radica en que si bien los navegadores graficos tienen una gran libertad para colocar 
y distribuir los elementos, esto no ocurre as! con los navegadores en modo texto. Por ello cuando vemos una 
pagina con tablas en uno de estos navegadores nuestra cuidada presentacion puede caer por los suelos. Sin hablar 
de navegadores para ciegos o los usados en los coches, que leen las paginas. En estos casos el usar tablas para 
controlar la apariencia provoca que el navegador se lie y no interprete bien la pagina. 
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Por supuesto existen metodos o trucos para evitarlo en lo posible, y mereceran nuestra atencion una vez nos 
hayamos convertido en unos expertos en la creacion de tablas. 

Como se crea una tabla 

Para crear las tablas sera necesario usar una nueva etiqueta: TABLE , que significa, en ingles, tabla. Esta etiqueta 
consta de instruccion de inicio, <table> , e instruccion de fin, </table> . Entre ambas debemos introducir 
otras tres etiquetas, que definiran la estructura de la tabla. Estas etiquetas son: 


1 tr: La etiqueta Table Row nos permitira insertar bias en la tabla. La tabla tendra tantas filas como apariciones 
de esta etiqueta haya entre <table> y </table>. La instruccion de inicio de TR, <tr>, marca el comienzo 
de la lfnea, la instruccion de fin, </TR%gt;, marca su final. La instruccion de fin es optativa, si no se usa se 
considera que una lfnea ha acabado cuando comienza otra o cuando acaba la tabla. Entre el comienzo y el fin 
de la lfnea debemos insertar las celdas de la tabla. 

1 th: Este es el primero de los dos tipos de celdas existentes en el lenguaje HTML. El nombre de la etiqueta 
proviene del ingles Table Header , encabezado de tabla. A1 igual que la etiqueta anterior el comienzo del 
encabezado viene dado por la instruccion de inicio, <TH> y finaliza con la instruccion de fin, </th>, o con 
el comienzo de otra celda. En general entre el comienzo y el fin se suele insertar texto, que sera mostrado en 
negrita o subray ado y centrado. 

1 td: Este es el segundo tipo de celda de las tablas HTML. El nombre de la etiqueta, Table Data (Datos de tabla), 
nos induce a pensar que su funcion sera introducir todos los datos que queramos en las celdillas definidas de 
esta forma. Y asf sera, de hecho podemos insertar cualquier elemento de HTML: imagenes, listas, texto 
formateado e incluso otras tablas. La diferencia de esta celda con la anterior es pequena, y su existencia 
separada solo tiene sentido si consideramos el caracter descriptivo del HTML. En la practica la diferencia 
principal es que el texto de los encabezados de tabla aparecera resaltado y centrado y el de las celdas normales 
(TD) no. 


Nota 

El uso de las instrucciones de fin de TR, TD y TH es, como hemos dicho, optativo. Sin embargo en 
las primeras versiones del lenguaje HTML era obligatorio usarlas y por esta razon algunos navegadores 
antiguos las necesitan para poder entender las tablas. Es por ello que nuestra recomendacion es usar 
siempre dichas instrucciones de fin para seguir con nuestro objetivo de llegar a la mayor cantidad de 
publico posible. 

Con una mera description de las etiquetas es diffcil entender por completo como se crean tablas en HTML, asf 
que vamos a ver unos ejemplos. 

Para empezar crearemos una tabla sencilla de dos bias y dos elementos. Vayamos por pasos: 

1. En primer lugar ponemos la instruccion de inicio y fin de la etiqueta TABLE dejando un espacio entre ellas 
para insertar posteriormente el resto de etiquetas: 

<TAHi.K> 

...Otras etiquetas. . . 

</TABLE> 


w 
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2. A continuation insertamos las filas. La tabla que nos hemos propuesto crear consta de dos bias. Por tanto 
debemos usar la etiqueta TR dos veces. Lo que insertemos en la primera (entre la instruction de initio y la 
instruction de fin) sera el contenido de la primera fila y lo que insertemos en la segunda sera el contenido de 
la segunda fila: 


<tab 


3. El tercer paso sera definir el contenido de cada fila. Como nos habfamos propuesto que la tabla tuviese dos 
columnas en cada fila debemos insertar dos celdas en cada una. Como hemos explicado antes, para crear una 
celda debemos usar la etiqueta TD. Entre la instruction de inicio y la instruction de fin de esta etiqueta sera 
donde insertaremos el verdadero contenido de la tabla. En este primer ejemplo sencillo sera simplemente 
texto, pero puede ser cualquier otro elemento web como imagenes o listas. Volviendo a nuestro ejemplo, 
para cada fila debemos escribir el siguiente codigo: 


<TR> 


<td> Columnal </td> <td> Columna2 </td> 
:/TR> 


Nota 

En los ejemplos que veremos a lo largo de este curso sangraremos las etiquetas a distintos niveles para 
que sea mas sencillo saber que etiquetas estan dentro de otras. No es necesario realizar esto para que el 
codigo funcione, de hecho podrfamos escribir el codigo en una sola lfnea y tambien funcionarfa, pero si es 
recomendable ya que nos facilita mucho su lectura. 

4. El cuarto paso es ponerlo todo junto, repitiendo el codigo anterior para cada fila. El codigo final de la tabla 
sera: 


<TABLE> 

<TR> 

<TD> 

Fi1a1,Columna1 
</TD> 

<TD> 

Filal,Columna2 
</TD> 

</TR> 

<TR> 

<TD> 

Fila2,Columnal 

</TD> 

<TB> 

Fila2 , Columna2 
</TD> 
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En la figura 7.2 podemos ver como muestra Explorer ™esta tabla. 

Figura 7.2. Ya hemos creado nuestra primera tabla, aunque es sencilla ya podemos 
observar varias cosas curiosas en ella, por ejemplo que por defecto no se dibujan los 
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bordes. 
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Quiza el hecho que mas nos sorprenda es que la tabla no tiene bordes, y que las celdas no estan dibujadas. Mas 
adelante comentaremos algo mas sobre ello y aprenderemos a incluir bordes de diferentes tamanos. Lo que mas 
nos interesa ahora es comprender la estructura de la tabla anterior. Como hemos podido comprobar, esta tabla se 
va creando por bias, y dentro de cada fila se insertan las celdas, cada una de las cuales apareceran en una columna. 

A continuation mostramos una tabla ligeramente mas complicada, en la que, ahora si, haremos uso de los 
encabezados de tabla. En ella observaremos ademas que ocurre cuando una fila tiene mas celdas que otra. Para la 
creacion del codigo de esta tabla habra que llevar a cabo los mismos pasos que en el ejemplo anterior. El codigo 
final que define la tabla sera: 


</TABLE> 


Este ejemplo es mostrado en la figura 7.3. 
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Figura 7.3. En esta segunda tabla ya podemos ver como son mostrados los encabezados 
de tabla. 
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Como habfamos comentado, el texto de los encabezados es resaltado, en este caso (usando Explorer™) es 
mostrado en negrita y centrado con respecto al resto de los elementos de su columna. Por otro lado en este ejemplo 
observamos el efecto de la existencia de una fila con mas celdas (mas columnas) que el resto. En la primera fila 
insertamos tres celdas usando la etiqueta TH y sin embargo en las siguientes bias solo creamos dos celdas. Aunque 
lo pueda parecer esto no es ningun problema. El navegador creara una tabla de 3 bias y 3 columnas, pero algunas 
de las celdas estaran vacias. 
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Borde de las tablas 

El siguiente paso en el aprendizaje de las tablas consiste en anadirles un borde. Esto es tan sencillo como anadir 
un nuevo atributo a la instruction de inicio de la etiqueta TABLE. El atributo del que hablamos es border, 
que significa borde en ingles. Este atributo puede tomar un valor en pixeles que representa el grosor del borde 
a mostrar. Si incluimos border sin ningun valor es equivalente a border="1" Repitamos el segundo de los 
ejemplos vistos antes pero anadiendole un borde de grosor 5. 


Encabezadol 


<TH> 

Encabezado3 

</TH> 

</TR> 

<TR> 

<TD> 

Filal^.tjplumnal 

<TD> 

Filal,Columna2 

</TR> 

<TR> 

<TD> 

Fila2,Columnal 
<TD> 

Fila2,Columna2 

</TR> 

</TABLE> 


En la figura 7.4 podemos ver el resultado de este codigo. En ella observamos como Explorer™ le da un aspecto 
tridimensional al borde de las paginas. 
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Figura 7.4. Tabla con bordes. En esta tabla podemos observar lo que ocurre cuando una 
fila tiene mas celdas que otra o cuando insertamos una celda sin nada dentro. 
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Un aspecto interesante a resaltar de la figura 7.4 es que las celdillas que estan vacias, es decir, no tienen ni texto 
ni ningun otro elemento en su interior no son dibujadas por los navegadores. En este caso ni siquiera habiamos 
puesto las instrucciones <td> y </TD > correspondientes a esas celdas, aunque si las hubiesemos puesto, pero 
sin ningun contenido dentro, es decir, si hubieramos escrito: 


<TR> 

<TD> 


Fil : a2, Columnai 

<TD> 

Fila2,Columna2 

<TDX/TD> 

</TR> 


El resultado habria sido el mismo. 

Si queremos que si sean dibujadas debemos insertar la etiqueta TD con un salto de linea (<br>) o un espacio 
creado con una secuencia de escape, , para definirla. Esto es, en el caso anterior podfamos haber escrito. 


<TABLE BORDER "5"> 
<TR> 

<TH> 

Encabezadol 

</TH> 

<TH> 

Encabezado2 

</TH> 

<TH> 

Encabezado3 

</TH> 

</TR> 

<TR> 

<TD> 

Filal,Columnai 

'<£r&V 

<TD> 

Filal,Columna2 
<TD> 


</TR> 

<TR> 

<TD> 

Fila2,Columnai 
<TD> 

Fila2,Columna2 
<TD> 
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Creacion de tablas HTML 


</TR> 

</TABLE> 


En este caso habrfamos obtenido el resultado de la figura 7.5. 
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Figura 7.5. Tabla con celdas vacias. Poniendo <br> o las celdas que antes no existian 
ahora si son dibujadas, pero sin nada dentro. 


Q HTML 4.0 Specification - Microsoft Internet Explorer 


Archivo Edicion Ver Ir a Favorites Ayuda 


i : ■ala 0 g ih qaa 


Direccion | *] http^/w.'/VFForg/T F!^/PFi-Fdrnl4□ / 


next table of contents elements attributes 


W3C 


HTML 4.0 Specificatio 


W3C Proposed Recommendation 7 -Nov-199' 


This version: 

http://www.w3.org/TR/PR-html40-971107/ 
Latest version: 

http ://www. w3. org/TR/PR-html4 0/ 

Previous version: 

http ://www. w3. org/TR/WD -htm!40-970917/ 
Editors: 

Dave Raggett < dsr@w3.org > 

Arnaud Le Hors < lehors@w3.org > 

Ian Jacobs < ij@w3.org > 


Abstract 


Zone 


Como vemos, <br> y consiguen el mismo resultado. 




























Creacion de tablas HTML 


Insertar un titulo para la tabla 

El siguiente elemento importante a destacar en las tablas y del que todavia no hemos hablado es el titulo. Este 
sera un texto que acompana a la tabla podra estar situado encima o debajo de ella. Para insertarlo haremos uso 
de una nueva etiqueta: CAPTION (que se puede traducir al espanol como titulo), que debera ser usada entre las 
instrucciones <table> y </table >, de la siguiente manera: 


<TABLE> 

<CAPTI0N> Titulo de la tabla </caption> 
. . . Codigo de la tabla . . . 

</table> 


El texto que servira de titulo sera insertado entre las instrucciones de inicio y fin. Este texto podra ser formateado 
por otras etiquetas siempre y cuando sean de nivel de texto, esto es, que su inclusion no provoque un salto de linea. 
Esto, desgraciadamente, excluye a los encabezados (HI ,H2, etc.), pero no a las etiquetas de nivel de texto o a 
FONT. 

Los titulos de la tabla seran mostrados por defecto en la parte superior de esta, pero la etiqueta CAPTION permite 
el uso de un atributo (cuyo nombre nos resultara familiar), ALIGN , que nos permitira elegir que dichos titulos 
sean mostrados como pie de la tabla. El atributo ALIGN, puede tomar dos valores top y bottom. El primero de 
ellos, top, significa en ingles arriba o parte superior y su efecto sera que el titulo sea mostrado encima de la tabla. 
Bottom, por su parte puede ser traducido como abajo o parte inferior. El uso de este atributo provocara el efecto 
antes comentado: el titulo sera mostrado al pie de la tabla. El siguiente codigo es un ejemplo del uso este tipo de 
alineamiento del titulo: 


<TABLE> 

<Caption ALlGN=' r bcfttom tt > Pie de la tabla </CAPTlON> 
. . . Codigo de la tabla . . . 

</TABLE> 


A continuacion veremos un ejemplo completo de tabla con titulo. Es necesario resaltar dos aspectos de este 
ejemplo. El primero es que aunque usemos ALIGN="top" para el titulo, en realidad no es necesario, ya que este 
es el alineamiento que aparece por defecto. El segundo es que para resaltar el titulo nos hemos ayudado de las 
etiquetas BIG y B que ya conocemos, algo perfectamente valido dentro de la etiqueta CAPTION. 

Un ejemplo de inclusion de un encabezado es el siguiente: 


<TABLE> 

< CAPTION JtL$6R=' , t S)p"> 
<BIG> 

<B> 

Tabla de ejemplo 
</B> 

</BIG> 

</CAPTION> 

<TR> 


T7T 
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Figura 7.6. Con la etiqueta CAPTION podemos poner un titulo a la tabla. Este titulo 
puede situarse encima (ALIGN="top") o debajo (ALIGN="bottom") de la tabla. 
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Tamafio de las tablas 

Todavfa queda un tema de gran importancia en la creacion de tablas que debemos comentar: su tamafio. Quiza 
tras haber hecho algunos ejemplos el lector se habra dado cuenta que el tamafio de las tablas no es siempre el 
mismo. Lo mas probable es que este hecho no nos haya sorprendido, aun asf es importante la manera en que los 
navegadores calculan el tamafio de las tablas y sus celdas no es tan sencilla y suele ser muy util conocerla bien. 
Posteriormente aprenderemos a cambiar este tamafio a mano. 

Cuando al leer una pagina el navegador encuentra una tabla calcula cual es el tamafio tanto horizontal como 
vertical necesario para mostrar el contenido de cada una de las celdas. En este momento hay que tener en cuenta 
que todas las celdas de una misma columna deben tener un mismo ancho y que todas las celdas de una misma 
fila deben tener la misma altura. La altura de cada fila quedara determinada por el elemento mas alto (o el texto 
con mas lrneas) de todas las celdas de la fila. De manera similar se calcula el ancho de las columnas. Vistos 
estos conceptos probablemente se haya quedado el lector un poco confundido, esta parte es un poco complicada 
al principio pero se comprende rapidamente una vez hemos practicado un poco con tablas. 

Llegados a este punto ya podemos afirmar que sabemos todo lo necesario para crear tablas. Ahora nos queda 
conocer algunos aspectos mas avanzados y realizar algunos ejemplos para adquirir destreza en su uso. Pero antes, 
practiquemos un poco. 

Ejercicio 7.1 

En este ejercicio se propone la creacion de tablas con elementos de diferentes tamafios en sus celdas para observar 
como varfan sus tamafios. En el archivo extra.zip [ejemplos/extra.zip] se ofrecen imagenes de diferentes 
tamafios como ayuda. Las tablas que se proponen realizar son: 


1. Una tabla de 2 filas y 3 columnas. El contenido de todas las celdas sera la palabra: TABLA. 

2. Se sustituye la palabra TABLA en cada una de las celdas anteriores por un texto lo suficientemente largo para 
que ocupe varias lrneas. 

3. Crear dos tablas iguales a las dos anteriores pero con la imagen montana.gif en la segunda celda de la 
primera fila. 

4. Combinar el texto escrito en el segundo caso, la imagen montana. gif, y la imagen spot. gif en diferentes 
celdas para ver el cambio de tamafio que sufren. 


Alineamiento de tablas 

Hasta ahora las tablas que hemos visto no tenfan ningun tipo de alineamiento especial. Se situaban en el margen 
izquierdo y se extendfan hasta donde ocuparan por la derecha. Pero por supuesto el lenguaje HTML nos permite 
tener un mayor control sobre la disposition de las tablas con el uso de un nuevo atributo de la etiqueta TABLE: 
ALIGN. Este atributo nos permitira alinear la tabla a la derecha, a la izquierda o centrada respecto a la ventana del 
navegador, para ello toma los siguientes valores: 

• ALIGN="left Alinea la tabla a la izquierda de la ventana del navegador. La manera de actuar del navegador 
cuando se encuentra con una tabla alineada a la izquierda es identica a su comportamiento con imagenes con 
este mismo tipo de alineamiento, y por tanto tambien podemos conseguir que un texto envuelva la tabla tal y 
como hacfamos con las figuras y como podemos ver en la figura 7.7. 
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Figura 7.7. Con el atributo ALIGN podemos controlar el alineamiento de la tabla. 
Si elegimos ALIGN="left" el texto bordeara a la tabla al igual que ocurria con las 
imagenes. 



La forma de usar este tipo de alineamiento es: 
D1 


<7ABLE ALIGNS"left ”> 

...Codigo de la tabla... 
</TABLE> 


Para escribir texto al final de una tabla alineada a derecha o izquierda deberemos usar, al igual que hacfamos 
con las imagenes, la etiqueta BR con el atributo CLEAR. El siguiente ejemplo funcionarfa en ambos casos de 
alineamiento: 


<BR CLEAR="al1"> 


1 ALIGN="right": En esta ocasion la tabla sera alineada a la derecha. El texto tambien la envolvera como 
ocurria con las imagenes alineadas a este lado. En la figura 7.8: 


T75" 
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Figura 7.8. Usando alineamiento a la derecha (ALIGN="right") conseguimos un efecto 
muy similar al alineamiento a la izquierda. 



podemos ver el efecto de usar este modo de alineamiento: 
D1 


<TABLE ALIGN="right "> 

...Codigo de la tabla... 
</TABLE> 


1 ALIGN'="center": Usando este metodo de alineamiento obtendremos una tabla centrada respecto al ancho 
total de la ventana del navegador. El resultado de usar ALIGN="center" es identico al que obtendrfamos si 
introdujeramos la tabla entre las instrucciones <center> y </center >. En este tipo de alineamiento 


<TABLE ALTGN= "center "> 

...Codigo de la tabla... 
</TABLE> 


el texto no envuelve a la tabla como podemos apreciar en la figura 7.9. 
D1 


T7fT 
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Figura 7.9. Con ALIGN="right" la tabla se situa en el centro de la ventana del 
navegador y el texto ya no la envuelve. 



Aviso 

Hasta la aparicion de las versiones 4 de Explorer ™y Navigator™ ningun navegador soportaba el 
alineamiento ALIGN="center " en las tablas. Por esta razon es recomendable usar ademas la etiqueta 
CENTER encerrando la tabla para aseguramos que esta aparecera centrada. En este caso le estaremos 
diciendo al navegador dos veces que alineamiento tiene la tabla, esto no es problema siempre que los dos 
alineamientos coincidan, y por otro lado conseguiremos que todos los navegadores centren la tabla ya 
que si no entienden ALIGN="center" entenderan la etiqueta CENTER y viceversa. 

Alineamiento de celdas y filas 

Hasta ahora hemos estudiado el alineamiento de las tablas con respecto a la ventana del navegador. El siguiente 
paso sera aprender los diferentes tipos de alineamiento de los elementos de las diferentes celdas con respecto a 
estas. Estos tipos de alineamiento se dividen en dos: alineamiento vertical y alineamiento horizontal. En la figura 
7.10 podemos ver una tabla en la que se ilustran las posibilidades de tipos de alineamiento. 


T7T 
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Figura 7.10. Distintas posibilidades de los alineamientos vertical y horizontal de las celdas 
de una tabla. 


Q Tipos de listas numeradas - Microsoft Internet Explorer 
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D. 
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n 
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• Alineamiento horizontal : Para selecdonar el tipo de alineamiento horizontal de las celdas hay que usar el 
atributo ALIGN de las etiquetas TH o TD en funcion del tipo de celda. Este atributo permitira seleccionar entre 
un alineamiento a la izquierda (ALIGN="left"), centrado (ALIGN="center") o a la derecha (ALIGN="right"), 
tal y como vefamos en la figura 7.10. 

• Alineamiento vertical: En este caso usaremos un nuevo atributo: VALIGN (Vertical Align, alineamiento verti¬ 
cal). Las diferentes opciones con este tipo de alineamiento son las que vefamos en la figura 7.10: Alineamiento 
con la parte superior de la celda (VALIGN="top"), alineamiento en medio de la celda (VALIGN="middle") y 
alineamiento con la parte inferior de la celda (VALIGN=" bottom"). 

Por defecto las celdas de encabezado (TH) estan centradas tanto horizontal como verticalmente, mientras que las 
celdas normales (TD) estan alineadas a la izquierda y verticalmente se situan en el centra de la celda. El punto 
azul de la figura 7.11 representa el alineamiento por defecto en ambos tipos de celdas. 
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Figura 7.11. El punto azul de esta figura nos permite observar el alineamiento por defecto 
de los encabezados de tabla (TH) y de las celdas normales (TD). 



Este alineamiento por defecto puede ser cambiado para toda una fila usando los atributos ALIGN y VALIGN en 
la etiqueta TR. Por ejemplo si creamos una fila con el siguiente codigo: 


<TR ALIGN="right" 

VALIGN="bottom"> 

.., Etiquetas para crear las celdas ... 
</TR> 


Todas las celdas de esa fila tendran se alinearan por defecto a la derecha y abajo. Por supuesto si en alguna de las 
celdas (TD o TH) de esa fila se vuelven a usar ALIGN y VALIGN con unos valores distintos seran estos ultimos 
los que determinaran el alineamiento de esa celda en concreto. Por ejemplo: 


CTABLE BORDER="1"> 

<TR ALIGN="right " 

VALIGN= "bat tom"> 

<TD> 

Celdal 

</TD> 

<TD> 

Celda2 

</TD> 


TTW 


ALIGN= ”1 eft" 
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VALXGN= "top"> Celda3 </TD> 
</TR> 

</TABLE> 


El resultado de este codigo es que todas las celdas de esa fila tendran como alineamiento por defecto 
ALIGN="right" y VALIGN="bottom", pero en la tercera celda especificamos ALIGN="left" VALIGN="top" y 
cambiamos el abneamiento de esa celda en concreto como podemos ver en la figura 7.12 

Figura 7.12. Usando los atributos ALIGN y VALIGN en la etiqueta TR cambiamos 
el alineamiento por defecto de las celdas de esa fila, pero aun podemos modificar ese 
alineamiento usando los mismos atributos en cada celda. 



Nota 

Si el lector prueba este ultimo ejemplo probablemente no pueda apreciar el efecto del cambio de 
alineamiento porque la tabla es demasiado pequena. Para poder apreciar dicho efecto sera necesario 
aumentar el tamano de la tabla con los metodos que aprenderemos en el siguiente apartado. 

Ancho de tablas y celdas 

Como vimos antes en este capitulo, el ancho de las tablas queda determinado por el tamano necesario para mostrar 
el contenido de sus celdas. Sin embargo el lenguaje HTML nos permite especificar el tamano que deseemos por 
medio de un nuevo atributo de la etiqueta TABLE: WIDTH (que traducido significa ancho). Este atributo se usa 
igual que los vistos hasta ahora, y su valor representara el ancho en pixeles de la tabla: 
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<TABLE WIDTB="0$$t$&, " 

. . . Codiqo de la tabla . . . 
</TABLE> 


Es importante resaltar que si con ese tamano no se pueden mostrar todos los elementos de la tabla, por ejemplo si 
en la tabla anterior hay una imagen de ancho 550 que no cabe en una tabla de 500 pixeles de ancho, el navegador 
ignorara el atributo WIDTH. Si la tabla unicamente contiene texto la etiqueta WIDTH tiene una mayor utilidad, 
ya que el texto se adaptara a ese ancho, ocupando mas lineas si es necesario. 

Nota 

El tamano del ancho de una tabla tambien se puede especificar en porcentaje respecto al ancho total de la 
ventana del navegador. Por ejemplo: 


<TABLE WIDTH="50%"> 

. . . Codigo de la tabla . . . 
</TABLE> 


hace que la tabla sea la mitad de la ventana. Si el usuario hace mas pequena la ventana la tabla tambien 
se hara mas pequena. 

Tamano de las celdas 

Al igual que hemos modificado el ancho de la tabla completa tambien podremos modificar el tamano de cada 
celda por separado. En este caso tendremos mas posibilidades aun, ya que podremos modificar tambien la altura 
de la celda usando el atributo HEIGHT. 

Al igual que antes, las dimensiones que especifiquemos con WIDTH y HEIGHT solo seran respetadas si en ese 
espacio cabe su contenido. Por ejemplo en el siguiente caso: 


<TABLE> 


<TR> <TD WIDTH="5d n 
HEIGHT=”50"> 

CIMG SRC="img.gif" 
WIDfj*="100" 
HEIGHT="1@Q*?‘ 
:/TJ& ’ . 


</TABLE> 


la unica celda de la tabla tendra un tamano de 100 por 100, que es el tamano de la imagen que hemos insertado en 
ella. En este caso no pueden respetarse los atributos WIDTH y HEIGHT de la etiqueta TD ya que en una celda 
de las dimensiones indicadas en ellas no cabrfa la imagen. Si en su lugar hubiesemos usado < td width-" 150" 
he i ght= " 15 0" > estas dimensiones SI se hubiesen respetado. 

EJERCICIO 7-2 


w 
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Como la mejor manera de aprender es practicar vamos a realizar un sencillo ejercicio pero que agrupa gran parte 
de los conocimientos adquiridos hasta ahora sobre tablas. El objetivo sera crear una tabla con dos celdas y dos 
columnas de tamano 100x100 todas ellas. Deberemos insertar en cada una de ellas la imagen spot. gif y alinearla 
de tal manera que consigamos el resultado de la figura 7.13. 
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Figura 7.13. Este sera el objetivo del ejercicio 7.2. Una pista: debemos usar los atributos 
WIDTH, HEIGHT, ALIGN y VALIGN. 
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Latabladeberaestarcentraday tenerungrosor de5 pixeles. [Enelarchivo ej7-2.zip seofrecela solucion de 
este ejercicio] 

El atributo NOWRAP 

Para completar nuestro aprendizaje sobre el tamano de tablas y celdas y como modificarlo nos queda por comentar 
un ultimo atributo: NOWRAP. Este atributo no toma ningun valor, es decir, su forma de uso es: 


<TABLE> 

<TR> 


<TD NOWRAP> TextO </TD> 

</TR> 

</TABLE> 


Su efecto sera que el texto de esa celda no puede ser partido en varias lineas, para adecuarse al tamano de la 
celda. Cuando esto sucede se dice que la tabla ha envuelto (wrap en ingles) el texto. El significado de NOWRAP 
es por tanto no envolver el texto. Si es necesario para mantener el texto en una sola linea se ignoraran los atributos 
WIDTH y HEIGHT si fueron usados. En la figura 7.14 observamos una primera tabla con una unica celda en la que 
no hemos usado el atributo NOWRAP, en la segunda tabla mostramos la misma tabla pero poniendo NOWRAP 
en dicha celda. 
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Figura 7.14. Usando el atributo NOWRAP evitamos que el texto sea partido en varias 
lmeas, sin embargo no es recomendable usarlo en lineas muy largas como esta. 



0 



Yahoo! Visa - no annual fee, online shopping guarantee, rewards - apph 


Yellow Pages - People Search - Maps - Classifieds - Personals - Chat - Email 
Shopping - My Yahoo! - News - Sports - Weather - Stock Quotes - more... 


* Arts and Humanities 

Architecture, Photography, Literature ... 

* Business and Economy [Xtrail 

Companies, Finance, Employment ... 

* Computers and Internet [Xtrail 

Internet, WWW, Software, Multimedia ... 

i flgr 


• News and Media [Xtrail 

Current Events, Magazines, TV, l 

• Recreation and Sports [Xtr 

Sports, Games, Travel Autos, On 

• Reference 

Libraries, Dictionaries, Fhone Nuj 

X.! Zona de Internet 


Como vemos en este segundo caso la Ifnea de texto no cabe en el tamano de la ventana y por tanto se extiende mas 
alia de esta. 

Aviso 

Hay que tener mucho cuidado usando el atributo NOWRAP, ya que si despues escribimos un texto muy 
largo sin incluir ningun salto de linea (BR) todo el sera mostrado en una unica Ifnea, que no cabra en 
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pantalla y por tanto obligara al visitante a usar las barras de desplazamiento. 

Celdas que abarcan varias filas o columnas 

Es hora ya de comenzar con dos de los atributos mas interesantes en la creacion de tablas: ROWSPANy COLSPAN. 
Gracias a estos atributos podremos crear tablas mucho mas complejas y que se adapten a nuestras necesidades. 
Estos dos atributos sirven tanto para las celdas normales, TD, como para las celdas encabezado, TH, y su funcion 
sera extender una fila (ROWSPAN) o una columna (COLSPAN) para que ocupen el tamano de varias. Para 
comprender el significado del concepto extender lo mejor es ver un ejemplo: 


<TABLE BORDER="1"> 

<TR> 

<TH CGI.SPAN "2"> 

Celda de dos columnas 
</TH> 

</TR> 

<TR> 

<TD R0WSPAN="2"> 

Celda de dos filas 
</TD> 

<TD> 

P : l.a2, Columna2 

</TD> 

</TR> 

<TR> 

<TD> 


Fila3, Colinnn.a.2 

</TD> 

</TR> 

</TABLE> 


En la figura 7.15 podemos ver la tabla resultado de este codigo: 
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Figura 7.15. Los atributos COLSPAN y ROWSPAN nos permiten crear celdas que se 
extiendan varias columnas o varias filas. 


Q Expansion de celdas y columnas - Microsoft Internet Explorer 
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ROWSPAN y COLSPAN 


Celda de dos columnas 

Celda de dos filas 

Fila2,Columna2 
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como vemos la primera celda se extiende para ocupar dos columnas y la primera celda de la segunda fila ocupa 
dos filas. En este momento invitamos al lector a practicar con los atributos ROWSPAN y COLSPAN incluso con 
celdas de mayor tamano, ya que esta es la mejor manera de habituarse a ellos, mas adelante seguiremos realizando 
ejemplos practicos con estos y otros atributos de las tablas. 

Margeries y separacion de celdas 

El unico aspecto que nos queda por aprender sobre las tablas en HTML es el correspondiente a los margenes en 
las celdas y la separacion entre ellas. Antes de nada es conveniente comentar que el lenguaje HTML considera 
a cada celda como un elemento individual con sus propios bordes que no comparte con las celdas adyacentes. 
Basandonos en esta forma de ver las tablas podemos cambiar la distancia que existe entre los bordes de las celulas 
adyacentes usando el atributo CELLSPACING (Espaciado de celdas). El valor por defecto de este atributo es 1. En 
general se suele usar para eliminar el espaciado entre celdas (como veremos en el ejercicio 7-3) o para aumentarlo 
para crear un efecto como el del siguiente ejemplo: 


STABLE CELLSPACING=" 10' 
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BORDER="l "> 

. . . Codigo de la tabla . . . 
</TABLE> 


cuyo resultado podemos observar en la figura 7.16: 

Figura 7.16. El atributo CELLSPACING controla el espaciado entre los bordes de cada 
una de las celdas de la tabla. 


Q Distancia entre celdas: CELLSPACING - Microsoft Internet Explorer 
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Una segunda propiedad de las tablas de gran importancia es el margen que existe entre los elementos de las celdas 
y sus bordes. Esta separacion es nula por defecto, pero puede aumentarse usando el atributo CELLPADDING. La 
forma de usar este atributo queda descrita en el siguiente ejemplo: 


<TABLE CELLPADDING="10" 
BORDER="l" 

ALIGN="LEFT"> 

. . . Codigo de la tabla . . . 
</TABLE> 


w 


y en la figura 7.17: 




















Creadon de tablas HTML 


Figura 7.17. Con el atributo CELLPADDING podemos aumentar los margenes entre el 
contenido de las celdas y su borde. 



Margenes de celdas: CELLPADDINC 


Tabla con 10 pixels de margen 
(CELLP ADDIN G= 10) 


Filal,C olumnal 

Filal,Columna2 

Fila2,C olumnal 

Fila2 J Columna2 


Tabla con margenes nulos 
[Fila 1, C olumnal [Fila 1, C olumn 
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Tanto en el atributo CELLPADDING como en el atributo CELLSPACING el valor entre comillas representa un 
tamano en pixeles. 

Para practicar un poco el uso de estos dos atributos se propone un ejercicio con el que conseguiremos crear el 
efecto de una imagen entera a partir de sus trozos. 

Ejercicio 7.3 

Este ejercicio consiste en la division de una imagen grande en cuatro partes de igual tamano. El objetivo sera 
volver a juntarlas. Para ello usaremos una tabla de 2x2 con una de las partes en cada celda, sin borde y con 
margenes y espaciado de las celdas nulo. El resultado buscado debe parecerse al de la figura 7.18 (exceptuando 
las flechas y las letras rojas que son indicativas): 































HTML 


Figura 7.18. Ejercicio 7.3. Aunque pueda parecer que hay una sola imagen, en realidad 
hay cuatro cuidadosamente colocadas. 



Ejercicio 6.3 - Composicion de una imagen 
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Las imageries a usar, asi como una posible solution, a este ejercicio pueden encontrarse en el archivo ej7-3.zip 


Conclusion 

Bueno, ya podemos respirar tranquilos, ya sabemos todo lo que se puede saber sobre la creacion de tablas en el 
lenguaje HTML™ estandar. Sin duda es como para estar orgullosos, porque el metodo que usa este lenguaje no es 
excesivamente sencillo. Por esta razon no debe desanimarse el lector que llegado a este punto no recuerde parte de 
las etiquetas y atributos descritos en este capitulo. Nuestro objetivo no era ese, sino que como buenos creadores 
de paginas web conozcamos las etiquetas del lenguaje HTML sin llegar a saberlas de memoria pero lo suficiente 
para reconocer su funcion, conocer las posibilidades de las tablas y poder crear rapidamente tablas sencillas. Para 
la creacion de tablas muy complicadas es recomendable usar un asistente como los que incluyen FrontPage™ 
o HomeSite™ (la version shareware sera incluida en el archivo Frontpage.zip y HomeSite.zip). Aunque 
estos asistentes no siempre nos ofrecen justo lo que queremos, nosotros ya conocemos lo suficiente para retocar 
el codigo de la tabla una vez creada. 
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Anidamiento 

Lo que vamos a contar ahora no es nuevo, ya lo hemos comentado antes a lo largo de nuestro aprendizaje del 
lenguaje HTML y de las tablas, pero dado que es una de sus caracterfsticas mas usadas es importante repetirla y 
ensalzarla, estamos hablando del anidamiento de tablas. que es el anidamiento?. Ya hemos usado este nombre 
anteriormente en el curso, con lo que es probable que el lector ya tenga una idea de a que nos referimos con este 
nombre, pero es conveniente dar una description mas detallada de en que consiste. 

Una definition tecnica serfa: "El anidamiento consiste en el uso de una etiqueta dentro (entre la instruccion de 
inicio y la instruccion de fin, [Ver figura 6.20]) de otra, de manera que los efectos de ambas se sumen o combinen". 
Las imagenes enlace eran un perfecto ejemplo del uso del anidamiento. En ese caso usabamos la etiqueta img 
para insertar la imagen y despues usabamos la etiqueta A para convertirla en un enlace. Se combinaban los efectos 
de las dos etiquetas: 


<A HREF="enlace.htm"> 

<IMG SRC="img.gif"> <!— Imagen dentro de la etiqueta A —> 
</A> 


Figura 6.20. Las etiquetas anidadas son aquellas que se encuentran entre la instruccion 
de inicio y la instruccion de fin de otra etiqueta. De esta forma conseguimos que los efectos 
de ambas se sumen. 


ESTRUCTURA GENERAL DE ETIQUETAS ANIDADAS | 


-<ETIQ_1> 

-<ETIQ_2>< 
►</iTIS_2S 
►</ETIQ_l > 


|— <ETIQ_2>^-| 
L+</ETIQ_2 


Etiqueta anidada dentro 
de la etiqueta ETIQ_1 


Otro ejemplo que vimos anteriormente consistia en el uso de dos o mas etiquetas formateadoras de texto que 
anidabamos para sumar sus efectos. Por ejemplo: 


<B> <!—Negrita —> 

<U> < ! — Subrayado —> 

Texto en negrita y subrayado 
</U> <!— Fin subrayado —> 
</B> <!— Fin negrita —> 


Este caso es ligeramente mas complicado que el anterior, ya que ambas etiquetas tienen instruccion de inicio e 
instruccion de fin. Es por ello que tendremos que tener un cuidado especial. Si no insertamos las instrucciones en 
el orden correcto los resultados seran imprevisibles. Un ejemplo de uso incorrecto del anidamiento serfa: 


<B> <!—Negrita —> 


T9T 
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<U> <!— Subrayado —> 

Texto en negrita y subrayado 
</B> <!— Fin negrita —> 
</U> <!— Fin subrayado —> 


Una vez adarado el concepto de anidamiento estamos en disposicion de aplicarlo a las tablas. Cuando vimos 
la etiqueta de definition de celdas, td, comentamos que podrfamos insertar en ellas practicamente cualquier otra 
etiqueta del lenguaje HTML. Si lo que insertamos es otra etiqueta estaremos ante un caso de anidamiento de tablas. 
En la figura 6.21 vemos un ejemplo donde se observa la utilidad del anidamiento de tablas. El codigo usado es: 

Figura 6.21. En este ejemplo vemos como anidando una tabla dentro de otra podemos 
crear interesantes efectos en las paginas Web. 


Q Anidamiento de tablas - Microsoft Internet Explorer 
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<TABLE BORDER="1"> 

<TR> 

<TO'> 

< ! — TABLA ANIDADA DENTRO DE OTRA-> 

CIABLE BORDER="1"> 

<TR> 

<IDXA HREF="mes . htm">Nuestras principales OFERTAS del mes</A> 
</TD> 

</TR> 

<TR> 

<TDXA HREF="#alpes">LOS ALPES - 20 anos a su servicio</A> 
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</TD> 

</TR> 

<TR> 

HREF="#medida">Via.jes a su medida</A> 

</tb> 

</TR> 

<TR> 

<tp><A HREF="#donde">Donde encontrarnos</A> 
</TB> 

</TR> 

</TABLE> 

< !— FIN TABLA ANIDADA —> 


^ffo>s£IMG SRC="losalpes .gif "></TD> 
</TR> 

</TABLE> 


Como vemos, anidando dos tablas conseguimos crear efectos complejos obteniendo como resultado un gran 
control sobre la disposition los elementos de nuestra pagina. 

Nota 

El ejemplo de la figura 6.21 podia haberse realizado usando una unica tabla de 4 bias y el atributo 
rowspan en la segunda columna, sin embargo en ocasiones resulta mas facil usar el anidamiento de 
tablas y ademas da lugar a un codigo ligeramente mas intuitivo. 

Practica 3 - Tabla de Datos. 

La primera de las practicas consistira en la creation de una tabla de datos. Sera mas complicada que los ejemplos 
vistos hasta ahora y se parecera mas a lo que necesitaremos en el mundo real. 

Nuestro objetivo sera crear la tabla de la figura 6.22, pero vayamos paso por paso. 

Antes de empezar sera util desglosar la tabla objetivo en sus columnas y bias. Esto nos sera de gran ayuda segun 
vayamos creandola y nos permitira hacemos una idea inicial de la estructura de codigo que necesitamos. En la 
bgura 6.23 podemos ver como hemos realizado este desglose, en este caso vemos que sera necesaria una tabla 
de 5 bias y 5 columnas, existiendo celdas que se extienden varias columnas (colspan) y otras que se extienden 
varias bias (rowspan). Debemos recordar en este momenta que las celdas que se expanden deben ser debnidas 
(con td o th) en la primera de las bias y/o primera de las columnas que ocupan. 
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Figura 6.22. Nuestro objetivo en esta practica 3 sera realizar esta tabla. Para su 
realizacion necesitaremos usar gran parte de los atributos que hemos aprendido. 
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Figura 6.23. Una vez que sabemos como queremos que quede la tabla es muy util 
desglosarla en columnas y filas para no liarnos al escribir el codigo. 



Columna 2 

Columna 1 


Columna 3 


Columna 4 
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Vamos alia con la creacion de la tabla, para seguir mejor el proceso recomendamos al lector que se ponga de su 
editor de texto o editor de HTML favorito y vaya escribiendo el codigo. 

Paso 1. 

En primer lugar crearemos la estructura basica de la pagina y de la tabla, incluyendo, de paso, el titulo de esta con 
la etiqueta caption: 


<HTML> 

<HEAD> 

<TITLE>Practica 3</TIT;,E> 
</HEAD> 


TW 
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<BODY> 

<TABLE BORDER=l> 

<CAPTION>SuperOFERTA viaje a Nueva Zelanda</CAPTION> 
. . . Aqui iremos 'iiisertando el resto del cddigo . . . 
</TABLE> 

</BODY> 

</HTML> 


Paso 2. 

A continuacion vamos a crear la primera de las filas. La primera de las celdas, que estara vacfa ocupa dos filas y 
dos columnas. El codigo para definirla debemos ponerlo en la celda de la primera columna de la primera fila, y 
sera: 

<TRXTH ROWSPAN=2 COLSPAN=2></TH> 


A continuacion sigue una celda que ocupa 2 columnas y otra que ocupa dos filas. En definitiva el codigo necesario 
para crear la primera fila sera: 


<TR> 

<TH ROWSPAN=2 C0LSPAN=2X/TH> 

<TH COLSPAN=2>Hoteles 3 estrellas</TH> 
<TH ROWSPAN=2>Hoteles 4 estrellas</TH> 
</TR> 


Paso 3. 

Ahora crearemos la segunda de las filas, esta no es la que comienza con la celda "1 semana", sino la anterior 
porque la primera celda en la fila anterior se extendio dos filas. En este caso solo debemos escribir el codigo de 
dos celdas, ya que el resto son celdas que comenzaron en la primera fila y se expanden a esta segunda. No sera 
necesario definir esas celdas, ni siquiera para dejarlas vacfas, simplemente hay que ser consciente del espacio que 
ocuparan. Teniendo esto en cuenta el codigo usado sera: 


<TR> 

<TH>Solo alojamiento</TH> 
<TH>Pensi6fS completa</TH> 
</TR> 


Es posible que resulte un poco diffcil ver que de solo con este codigo las dos unicas celdas que hemos insertado 
se colocaran en la tercera y cuarta columna, pero recordemos las dos primeras ya estan ocupadas por la primera 
celda de la primera fila. Este es un buen momento para probar con un navegador lo que hemos hecho hasta ahora. 
Guardemos el codigo y abramos el archivo HTML con un navegador. En la figura 6.24 podemos ver la tabla tal y 
como la muestra Internet Explorer™. 


W 
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Figura 6.24. Ya tenemos hecha una parte de la tabla, algunas de las celdas se expanden 2 
filas, 2 columnas o ambas, aunque en algun caso todavia no es apreciable. 



Paso 4. 

Siguiente fila. La primera celda y la ultima se expanden 2 filas, por lo que usaremos el atributo rowspan=2 en 
ellas: 


<TR> 

<TH ROWSPAN="2">1 semana</TH> 

<TH>Avi6n turista</TH> 

<TD>700 USD</TD> 

<TD>1Q00 USD</TQ> 

<TD ROWSPAN="2" ALIGN="center">1500 USD</TD> 
</TR> 


La siguiente fila, la cuarta, sera muy similar a la segunda, ya que sus celdas no usan rowspan ni colspan 
y tendremos que tener en cuenta las celdas de la fila anterior que se expanden hasta la cuarta. El codigo que 
debemos usar sera: 




























Creacion de tablas HTML 


<TH>Avion preferente</TH> 
<TD>850 USD</TD> 

<TD>1150 USD</TD> 

</TR> 


Ya hemos llegado a la ultima de las filas. A estas alturas ya nos resultara facil. La primera celda se expande dos 
columnas, con lo que tendremos que definir un total de 4 celdas para completar las 5 columnas: 


<TR> 

<TH COLSPAN="2">2 semanas</TH> 
<TD>1300 USD</TD> 

< : •)>: 8b0 USD</Tl)> 

<TD>2600 USD</TD> 

</TR> 


Tras haber escrito todo este codigo es momento de volver a ver el resultado con un navegador. En este caso 
obtendremos la tabla de la figura 6.25. Ya esta practicamente terminada nuestra tabla objetivo, solo nos quedan 
algunos detalles. 
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Figura 6.25. Ya tenemos la tabla practicamente terminada. Solo quedan algunos detalles 
para darla por concluida. 



Paso 5. 

En este quinto y ultimo paso daremos los ultimos acabados a la pagina. Primero daremos formato al texto del 
tftulo. Para ello usaremos la etiqueta font. Para elegir el color rojo (#FF0000 usando el codigo hexadecimal) 
usaremos el atributo COLORy para aumentar el tamano usaremos el atributo size: 


<CAPTION> 

<FONT SIZE="+2" COLOR="#FFOOOO"> 
SuperOFERTA viaje a Nueva Zelanda 
</FONT> 

</CAPTION> 


Por ultimo debemos centrar las celdas donde estan los precios de los distintos viajes. Estas celdas son las creadas 
con la etiqueta td y deberemos usar el atributo align de la siguiente manera: 
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<TD ALIGN="center">700 USD</TD> 


Repitiendo esto para el resto de las celdas ya tenemos la tabla terminada. El codigo final sera: 


CTABLE CELLSPACING="2" CELLPADDING="2" BORDER="l"> 

<CAPTIONXFONT SIZE="+2" COLOR="#FF0000">SuperOFERTA vja.je a Nueva^ 
Zelanda</FONTX/CAPTION> 

<TRXTH ROWSPAN= "2" CO! SPAN "2"></TK> 

<TH COLSPAN="2">Hoteles 3 estrellas</TH> 

<TH ROWSPAN="2">Hot^igs 4 estrellas</TH> 

</TR> 

<TRXTH>Solo alojamiento</TH> 

<TH>Pensi6tt completa</TH> 

</TR> 

<TRXTH ROWSPAN= "2 ">3, semana</TH> 

<TH>Avi6n cur i sta</TI!> 

<ALIGN="center">700 USD</*$^ 

<td ALiGN="center‘*».lQbO usd</td> 

<TD ROWSPAN="2" ALIGN="center">1500 
</TR> 

<TRXTH>Avt6n preferente</TH> 

<TD ALIGN="center">85Q USD</TD> 

<TD AL I GN= "cent er * Xt’Kj 0 USD</TD> 

</TR> 

<TRXTH COLSPAN="2">2 semanas</TH> 

<TD ALIGN "centor">13C0 'JSD</TI)> 

<TD ALIGN="center">18S0 IJSD</TD> 

<TD ALIGN="centeX*>2 600 USD</TD> 

</TR> 

</TABLE> 


Una vez escrito por completo guardamos el archivo y volvemos a verlo con el navegador eligiendo la opcion (o 
pulsando el boton) actualizar o reload Si hemos conseguido crear esta tabla es indudable que somos capaces de 
crear cualquier otra. Como ya comentamos anteriormente el metodo usado por el lenguaje HTML para crear 
tablas no es muy sencillo y el proceso se hace algo pesado. Por esta razon en ocasiones es conveniente usar algun 
asistente o wizard de creacion de tablas. Un excelente ejemplo de este tipo de asistentes es el que acompana al 
editor de HTML HomeSite 3.0™ y que podemos ver en la figura 6.26. El problema de este tipo de asistentes 
es que no siempre permiten aprovechar todas las posibilidades del lenguaje HTML y ademas en ocasiones no 
obtenemos con ellos el resultado deseado. Pero ahora nosotros ya conocemos las etiquetas y atributos de creacion 
de tablas del lenguaje HTML, con lo que no nos resultara complicado retocar el codigo creado con el asistente. 
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Figura 6.26. Los asistente (wizard) para la creacion de tablas como este, incluido con el 
editor de HTML HomeSite™, son de gran ayuda en la creacion de tablas complicadas. 



Sugerencia 

Un buen truco para hacer compatibles las con los navegadores que no entiendan la etiqueta table ni sus 
subetiquetas es incluir la etiqueta <BR> al final de cada fila (antes de </tr>). De esta manera forzaremos 
un cambio de lfnea que Simula, a grosso modo, un cambio de fila. 

Practica 4 - Pagina Web con una estructura creada con 
tablas. 

Es el momento de realizar de la cuarta practica del curso de HTML. En ella seguiremos desarrollando el sitio Web 
de la agenda de viajes Los Alpes, pero esta vez anadiremos un gran avance de complejidad de acuerdo con los 
conocimientos que ahora tenemos. 
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El sitio Web constara de un total de cuatro paginas, y contara con gran contenido grafico. Ademas usaremos las 
tablas tanto para insertar datos como para controlar la disposition de los elementos de las paginas, con lo que nos 
servira para practicar lo recien aprendido en este capitulo. 

Pero sin perder mas tiempo vamos a comenzar con la realization de las nuevas paginas. Vayamos por pasos: 

Paso 1 - Planificacion. 

En todo proceso de creation y diseno de paginas Web el primer paso a llevar a cabo sera la planificacion, antes 
incluso de escribir la primera linea de codigo. En esta planificacion deberemos: 


1. Fijar cuales son nuestros objetivos con la creation las paginas 

2. Pensar que tipo de personas visitaran nuestra pagina para adaptar su contenido a ellas. 

3. Planear el contenido que queremos incluir en las paginas. 

4. Planificar la estructura general del sitio Web y la information que debe haber en cada una de las paginas. 

5. Disenar la disposition de los elementos en cada una de las paginas. En general la pagina principal sera 
ligeramente distinta al resto pero debe mantener suficientes similitudes. 

6. Lo mas probable es que existan otras tareas a llevar a cabo especificas del Web en concreto que estemos 
realizando. 


Nota 

Para la realization de las tareas cuarta y quinta debemos ser conscientes de los conocimientos y her- 
ramientas con los que contamos para no proponernos objetivos irrealizables. Tener un buen conocimiento 
del lenguaje HTML, como ocurre en nuestro caso, nos permitira eliminar muchas limitaciones que apare- 
cen en este punto de la planificacion. 

Vayamos paso por paso realizando cada una de las tareas que acabamos de nombrar: 


1. Nuestro objetivo sera que las personas que visiten las paginas se interesen por las ofertas y se pongan en 
contacto con la agenda para contratar el viaje. Un segundo objetivo sera dar una buena imagen de la 
companfa. 

2. Todo tipo de personas podran acceder a nuestras paginas por lo que sera conveniente que puedan ser vistas 
con cualquier navegador. 

3. En las paginas informaremos sobre el prestigio de la agenda y sus ofertas de viajes mas atrayentes. 

4. La pagina principal dara information general sobre la empresa y como contactar con ella y ofrecera enlaces 
para ir a las distintas secciones del sitio Web: Ofertas, Viajes a su medida y la superOferta. En total el sitio 
Web quedara compuesta por cuatro paginas: la principal y tres paginas de contenido que estaran ademas 
interconectadas entre sf. En la figura 6.27 podemos ver la estructura del sitio Web de Los Alpes tal y como 
lo hemos planeado. 
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Figura 6.27. Estructura del sitio Web de Los Alpes. La pagina principal tendra 
enlaces a las otras tres que ademas estaran enlazadas entre si. 



5. Es hora de disenar la disposicion de los elementos en cada una de las paginas. Aquf es donde mas variaran 
las paginas con respecto a las de las practicas anteriores. Usando tablas para insertar el contenido tendremos 
una gran libertad en la colocation de los distintos elementos de la pagina. Para la estructura de la pagina 
principal usaremos dos tablas, la primera para la cabecera con el logo e imagen de Los Alpes y la segunda 
para dividir el cuerpo en dos columnas. En la de la izquierda pondremos las diferentes opciones del sitio 
Web y a la derecha el texto. En la figura 6.28 podemos ver un boceto de como quedara la pagina. Las lfneas 
azules discontinuas representan los bordes de las tablas que necesitaremos usar. 

Figura 6.28. Boceto de la disposicion de los elementos en la pagina principal y las 
tablas que vamos a necesitar crear para conseguir esa visualization. 
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Sugerencia 

Un buen truco para cuando creemos la estructura de un documento HTML basandonos en tablas es mantener 
el borde visible, border=" l", para asegurarnos que toma la forma que deseamos. Cuando ya sepamos que 
funciona bien eliminaremos el borde, border=" 0". 

D1E1 resto de paginas seran ligeramente distintas. La tabla del encabezado tendra una fila mas con las 
opciones del sitio Web y con un boton para volver a la pagina principal. El cuerpo se dividira en el texto 
(derecha), y una serie de anclas a las distintas secciones (izquierda) de ese mismo documento HTML. En la 
figura 6.29 podemos ver la estructura general de estas paginas. 

Figura 6.29. Boceto de la disposition de los elementos del resto de paginas. Aunque 
conserva un parecido con la pagina principal hay algunos cambios. 
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Una vez hemos creado la estructura del sitio Web y ya tenemos una idea de como va a ser la disposition de los 
elementos en el sitio Web es hora de empezar a escribir el codigo. 

Paso 2 - Codigo basico. 

En primer lugar ejecutamos nuestro editor texto o editor de HTML favorito, ya sea el bloc de notas, el editor 
HTML de FrontPage™ o cualquier otto, y creamos un archivo nuevo. Es recomendable crear un archivo nuevo 
porque aunque usaremos parte del codigo escrito en la practica 2 y 3 los cambios seran significativos y modificar 
ese codigo serfa algo complicado. 

Nota 

Como parte del codigo que usaremos sera igual al que utilizamos para las practicas 2 y 3 recomendamos 
a aquellos lectores que tengan esta posibilidad que en vez de escribir de nuevo dicho codigo lo copien 
de lo que ya tienen. Para ello lo mas comodo es usar las opciones de cortar y pegar que ofrecen tanto 
Windows™ como MacOS™ y Unix™. Sera necesario tener tanto el documento HTML nuevo como el 
archivo del que queremos copiar el codigo abierto. Estando activo este ultimo seleccionamos la section 
de codigo a copiar y elegimos en el menu archivo la option copiar (figura 6.30). En algunos programas la 
manera de copiar sera distinta pero en todo caso sera muy similar. Despues vamos al archivo que estamos 
escribiendo, situamos el cursor en el punto donde queremos insertar el codigo copiado y elegimos la 
opcion pegar del menu edition. Ya hemos copiado el codigo y nos hemos ahorrado el trabajo de volver a 
escribirlo. 
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Figura 6.30. Usando las opciones de cortar y pegar nos ahorraremos el proceso 
reescribir el codigo de las practicas anteriores. 
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Una vez tenemos delante un archivo nuevo escribimos las etiquetas que definen la estructura del documento 
HTML: 


<HTML> 

<HEAD> 

<TITLE>Agencia de viajes LOS ALPES</TITLE> 
</HEAD> 

<BODY> 

<!— Resto del cddigo —> 

</BODY> 

</HTML> 


Paso 3 - Estructura de la pagina principal. 





























Creation de tablas HTML 


El siguiente paso consistira en dar la estructura a las paginas y aquf es donde empezamos a poner en practica 
nuestros conocimientos sobre tablas. Por ahora vamos a centrarnos en crear la pagina principal, index. htm. En 
la figura 6.28 vefamos como planeamos colocar los distintos elementos. Es hora de escribir el codigo necesario 
para llevar esa planificacion a la practica. Seran necesarias dos tablas ambas de una fila y dos columnas. 


<TABLE ALIGN="center"> 

<TR> 

<TD><!— Logo —></TD> 
<TD><!— JsdS alpes —></TD> 
</TR> 

</TABLE> 

<TABLE WIDTH="106%"> 

<TR> 

<TD><!— Opciones —></TD> 
<TD><!— texto —></TD> 
</TR> 

</TABLE> 


La primera de las tablas la hemos centrado usando el atributo align. La segunda nos convendra que ocupe 
todo el ancho posible, por lo que usamos WIDTH="100%". Despues de la segunda tabla simplemente pondremos 
datos relacionados con la elaboration de la pagina (direction Webmaster, Copyright, fecha actualizacion, etc.). A 
este tipo de information incluida generalmente al final de las paginas se le denomina en ocasiones coletilla. A 
continuation podemos ver el codigo de nuestra coletilla. 


<ADDRESS> 

<SMALL> 

Web realizado por: <FONT CQLQR^"#EDB3C|t%TowerWeb</FONT> 
<BR> 

Copyright © 1998 Los Alpes - Agencia de viajes<BR> 
fjltima actualizacldn: 9 de tlrzo de 1998 
</SMALL> 

</ADDRESS> 


En la figura 6.31 vemos el resultado de este codigo. En esta figura vemos un adelanto de la imagen de fondo y 
color del texto que mas adelante incluiremos en la pagina, ademas hemos incluido un texto adicional (solo en la 
pagina principal) para animar a los visitantes a hacer sugerencias sobre la pagina. 
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Figura 6.31. La coletilla aporta un toque de profesionalidad a nuestra pagina ademas de 
ofrecer informacion interesante a los visitantes. 



Como vemos, hemos usado la etiqueta small para que el texto de la coletilla sea menor que el del resto de la 
pagina. 


Esta coletilla la repetiremos en cada una de nuestras paginas, y posteriormente iremos cambiando la fecha de la 
ultima actualization en cada una individualmente. 

Paso 4 - Estructura del resto de paginas. 

La disposition de los elementos Web en el resto de paginas sera muy similar a la de la pagina principal. En este 
caso crearemos en primer lugar una pagina con el codigo que deben compartir todas las paginas del sitio Web y 
lo guardaremos en un archivo de nombre plantilla. htm. Para crear el resto de paginas usaremos como base el 
codigo de este archivo, que sera: el codigo base que escribimos en el paso 2 mas: 


CTABLE ALIGN="center"> 

<TR> 

<TD><!— Logo —></TD> 
<TD><!— Eos alpes —></TD> 
</TR> 

<TR> 

<TD><!— Opciones —></TD> 
</TR> 

</TABLE> 

<TABLE WIDTH="1GQ%"> 

<TR> 

<td><!— Secciones —></td> 
<TD><!— texto —></TD> 


TTT 
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</TR> 

</TABLE> 


Tambien podremos anadir una coletilla con datos sobre la pagina Web al igual que hatiamos en el caso de la 
pagina principal. 

Paso 5 - Contenido de la pagina principal. 

Terminada la planificacion y una vez creada la estructura de las paginas ahora es cuando empezaremos a ver 
los resultados de nuestro trabajo. Empezaremos poniendole contenido a la pagina principal. En este momento 
recuperamos el codigo que escribimos en el paso 3 y empezamos a rellenar las celdas de las tablas. Empezamos 
con la primera tabla. En la celda de la derecha ponemos el logo de Los Alpes y en la de la derecha ponemos el 
letrero. Como en ambos casos debemos insertar imagenes usamos la etiqueta img de la siguiente manera: 


<CENTER> 

<TABLE ALIGN="center"> 

<TR> 

CTDXIMG SRC=" img/logo .gif" WIDTH=90 HEIGHT—99 ALT=" [LOGO] "X/lEoV 
<TDXIMG SRC="img/losalpes WIDTH=440 HEIGHT=99 ALT="LOS ALPES - Agenda de^ 

Via jes"></Tti>. 

</TR> 

</TABLE> 

</CENTER> 


Nota 

Para preparar las paginas para los visitantes que usen navegadores en modo texto hemos rellenado el 
atributo alt de la etiqueta IMG. Ademas hemos usado los atributos width y height, pero no para 
modificar su tamano, sino porque de esta manera conseguimos una carga mas rapida de las paginas, 
como comentamos en el capitulo 5. 

Es el momento de rellenar la segunda de las tablas. La columna de la derecha la planeamos para insertar el texto 
de la pagina. En ella insertamos una breve description de la Agenda de viajes Los Alpes para darla a conocer 
(podremos ver este texto completo en la figura 6.32). A continuation ponemos las direcciones de las sedes en 
Madrid y Barcelona de los Alpes. Si recordamos en la practica 2 usamos la etiqueta pre para introducir dichas 
direcciones. Ahora podemos usar las tablas para conseguir el mismo efecto y con mejores resultados: 
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Figura 6.32. Pagina principal de la agencia de viajes Los Alpes. Aunque no podemos ver 
los hordes de las tablas podemos intuir por donde irian. 
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<TABLE WIDTH="10.0%"> 

<TR> 

<TD><!— Opciones —></TD> 

<TD><!— texto —> 

<P>La agenda de viajes Los Alpes goza de un gran prestigio en el mundo dfe los . . . 
<TABLE BORDER="l n CELLSPACING=5> 

<TRXTD> 

<STRONGXU>MADRID</U></STRONGXBR> 

C/JOSE ACANA, 9 BAJO<BR> 

28333 MADRID<BR> 

TELF. 921 99 39<BR> 

FAX. 921 99 38<BR> 

</TDXTD> 

<STRONGXU>BARCELONA</UX/STRONGXBR> 

C/ALBERTO BUSQUETB : ,13 QUINTO A<BR> 

08333 BARCELONA<BR> 

TELF. 933 33 23<BR» 

FAX. 933 33 24<BRX/TDX/TR> 

</TABLE> 

</TD> 

</TR> 

</TABLE> 


Ya podemos dar por terminada la columna de la derecha de la pagina principal. La columna de la izquierda 
tendra enlaces a las distintas paginas del sitio Web y volveremos sobre el codigo usado en el paso 6 al hablar del 
contenido grafico. Por ahora podemos ver un adelanto de como va a quedar esta pagina principal mostrado en la 
figura 6.32. 

Paso 6 - Contenido grafico. 

La apariencia de un Web es uno de los aspectos mas importantes en la creacion de este. Por ello dedicamos un 
largo capftulo 5 a el. Ahora es el momento de poner en practica de nuestros conocimientos. A la hora de insertar 
graficos tenemos dos posibilidades: 


1. Crear nuestros propios graficos usando un programa de dibujo vectorial y/o un programa de retoque 
fotografico. Esta es, sin duda, la mejor de las dos opciones, pero tambien es la que lleva mas tiempo asf 
como varios programas y amplios conocimientos de su uso por parte del creador de los graficos. Por esta 
razon es comun recurrir a la segunda de las posibilidades. 

2. Crear nuestros propios graficos usando un programa de dibujo vectorial y/o un programa de retoque 
fotografico. Esta es, sin duda, la mejor de las dos opciones, pero tambien es la que lleva mas tiempo asf 
como varios programas y amplios conocimientos de su uso por parte del creador de los graficos. Por esta 
razon es comun recurrir a la segunda de las posibilidades. 

En nuestro caso vamos a optar por la segunda opcion. Hemos usado algunos graficos del clipart que acompana a 
Microsoft FrontPage™, en concreto al tema Travel .Posteri ormente hemos retocado alguno de estos graficos con 
Paint Shop Pro™(podrfamos haber usado cualquier otro programa de retoque fotografico, pero hemos elegido este 
por ser shareware). Usando este programa hemos creado una especie de botones (tranque serviran como enlace a 
las distintas paginas de la Web. Ahora ya podemos escribir el codigo usado: 


<TABLE ALIGN="center"> 

<TR> 

CTDXIMG SRC="l#Bg/logoWIDTH=90 HEIGHT=99 BORDER=0:[LOGO] "></TD> 
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CTDXIMG SRC="img/losalpes.gif" WIDTH=440 HEIGHT=99 BORDER=0 ALT="LOS ALPES 
Agenda de ^Ifrjes"x/TD> 

</TR> 

</TABLE> 

</CENTER> 

<TABLE CELLPADDING="10"> 

<TR> 

<TD VALIGN="tOp"> 

<!— Opdor.es —> 

<A HREF="medida . htm"XIMG SRC="img/tranvhal. jpg" WIDTB=136 HEIGHT=48 BORDER=O f _ J 
ALT="Viajes a su medida"x/A> 

<A HREF="mes .htm"XXMG 5RC="img/tranvha2.jpg" WIDTH=136 HEIGHT=48 BORDER=O f _ J 
ALT="Ofertas del Mes"x/A> 

<A HREF=" superofe . htm"XIMG SRC="img/tranvha3 . jpg" WIDTH=136 HEIGHT=48 BORDER=O f _ J 
ALT="La superOFERTA"X/A> 

</TD> 

<TD> 

< ! — texto —> 

<PXF0NT SIZE="+2">L</F0NT>a agenda de viajes Los Alpes goza de un gran prestigio^ 
en el Hitindo de. . . 


Nota 

Tambien podfamos usar una tabla de tres filas dentro de esta celda para tener un mayor control sobre la 
disposicion de los botones, poniendo cada uno en una de las filas. Dejamos la realizacion de esta mejora 
como ejercicio para el lector. 
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Figura 6.33. Visualization de medida. htm 
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VIAJES A SU MEDII 


EMPRESAS 

TURISTASp 

STUDIANTC 


Cada persona tiene unas caracteristicas especiales y unos requ 
agencia de viajes LOS ALPES no tratamos a to do el mundo 
persona de manera personalizada. Una prueba de ello son nues 

USTED: 



jUBiLADos EMPRESAS 


Porque sabemos lo que su empresa quiere hemos ere ado una : 


resolveran todos sus problemas. Lea sus caracteristicas y no du 
mismo. 


• Los viajes para empresas incluyen transporte de ida, con 
hospedaje en hoteles de nuestra cadena. 

• Cuando el viaje es en avion un mensajero parara a recogi 
aeropuerto. Mas tarde enviaremos un chofer arecogerle, 
para que usted solo tenga que coger el avion y volar. 

• En la estacion o aeropuerto de destino le estaran esperan 
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Paso 7 - Cambiar el fondo y color del texto. 

Hemos elegido usar una imagen de fondo, y como esta imagen es oscura debemos ademas cambiar el color del 
texto y los enlaces. Todo ello lo hacemos con los atributos de la etiqueta body: 


<BODY LINK="#FED354" VLINK="#EDB301" ALINK="#FFFF00" BGCOLOR="#33|pfj2 
TEXT="#71AC84" BACKGROUND="img/tratilea.jpg"> 


Este codigo deberemos usarlo en todas y cada una de las paginas. En el hemos usado el atributo bgcolor para 
poner un color de fondo similar al color de la imagen, de esta forma si hay algun problema con la imagen el color 
de fondo especificado se usara en su lugar y la pagina no perdera mucho. 



Creacion de tablas HTML 



Creadon de tablas HTML 


Figura 6.34. Resultado final de la pagina mes. htm 
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En la Agencia de viajes Los Alpes estamos celebrando nuestros primeros 20 anos, y 
OFERTAS Y VIAJES ESPECIALES que no podra resistir. Entre ellas destacz 

(Salidas desde Madrid y 

Viajes de una semana de duracion 
Desde el 12/17 de Enero al 16/21 de Marzo y del 31 de Ma 

Hotel Florida, o similar ***:. 36. 

Semana Camaval, 9/14 Febrero:. 35 


Informacion y reservas: 902 333 333 



(Salidas desde Ma> 


Salida 7 Enero al 11 Febrero Hotel Travelodge Mail 1 
7 noches 104.000 pesetas, ninos 2 a 11 anos con 2 adultos 59.00C 
Incluye avion ida y vuelta US Airways traslados aeropuerto hotel aerop 


ANDORRA 
J R LAN DC 
os Angel £ 
PARIS 
MOSCLJ 





Creacion de tablas HTML 


Paso 8 - Realizacion del resto de las paginas. 

Lo que queda es ya muy similar a lo que llevamos hecho. Usando la plantilla creada en el paso 4 y ciertas imageries 
(aunque invitamos al lector a crear las suyas) no nos sera diffcil. Para que sea mas facil ahf van algunas pistas: 


• En las figuras 6.33, 6.34 y 6.35 hemos ido mostrando el resultado final de estas paginas. 

• Para la pagina mes.htm hemos creado 5 nuevos botones para cada uno de los viajes y los hemos situado en la 
columna de la derecha de la segunda tabla, tal y como habfamos planeado. 

• Igualmente hemos creado botones para la pagina medida. hfjfti. 

• El ultimo comentario es que para el archivo SuperOFE. htm al final suprimimos la segunda de las tablas por 
ser innecesaria. En esta pagina usamos la tabla creada en la practica 3. 
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Principal 


La superOFERI 


Hoteles 3 estrellas 


Solo alorjamiento 


Pension comple 


Avion turista 


1 semana 


Avion 


2 semanas 


dude mas y pdngase en contacto con nosotros para reservar su plaza antes de 


Arriba 


Ln la agencia de viajes Los Alpes no nos cansamos de bus car nuevas formulas para < 
clientes. 

De ahora en adelante todos los meses ofireceremos nuestra SuperOFERTA que ofin 
numerosas op clones a elegir y con visitas turisticas guiadas totalmente gratis. 


Principal 


Agenda do viajes 


viajes a su 
medida 
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Paso 9 - Retoques, pruebas, revision y mantenimiento. 

El ultimo paso es el mas largo de todos y consta de varias tareas. En primer lugar se pueden retocar las imageries 
para que queden mejor y/o ocupen menos se puede aumentar el tamano de la primera letra de cada parrafo (como 
hemos hecho nosotros) y en definitiva cualquier mejora del aspecto de las paginas. Despues hay que hacer pruebas 
de la pagina. Son especialmente importantes las pruebas con otros navegadores, con varias resoluciones de pantalla 
(600x480 y 800x600 especialmente) y con distintas cantidades de colores, en concreto debemos ver si con 256 
colores los graficos todavia se ven bien. 

Si este fuese un sitio Web real deberfamos ademas deberfamos realizar continuas revisiones de las paginas y 
mantener un contenido actualizado constantemente. 

Una vez hemos creado el Web completo podemos tomarnos un descanso y ensenar las paginas a nuestros 
conocidos. Sin duda es como para estar orgullosos de lo que ya somos capaces de hacer. De ahora en adelante 
aprenderemos los aspectos mas avanzados, y a la vez mas interesantes, del lenguaje HTML. 
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Jorge Ferrer 
Victor Garcia 

Version 1.0 

Copyright Jorge Ferrer y Victor Garcia. Se otorga permiso para copiar, distribuir y/o modificar este doc- 
umento bajo los terminos de la Licencia de Documentation Libre GNU, Version 1.1 o cualquier otra ver¬ 
sion posterior publicada por la Free Software Foundation. Puede consultar una copia de la licencia en: 
http://www.gnu.org/copyleft/fdl.html 

Ya hemos terminado la primera fase en el aprendizaje de la programacion de documentos HTML. Dominamos 
todas las etiquetas necesarias para crear paginas de gran calidad. Es hora de comenzar con una segunda fase 
dedicada al HTML avanzado. En esta fase aprenderemos etiquetas para crear efectos muy llamativos en las paginas 
Web e iremos conociendo mejor como funcionan los navegadores para crear paginas que se ven correctamente en 
todos. 

A estas alturas del curso ya conocemos una gran cantidad de etiquetas. Sabemos controlar el tamano, color 
y formato del texto, incluir imagenes y todo tipo de contenido grafico, crear listas, disponer datos en tablas e 
incluso, usando estas, tener un mayor control sobre la disposition de los elementos de una pagina. En definitiva, 
somos capaces de crear paginas Web como el mejor de los programadores del WWW. Con estos datos en la mano 
podriamos pensar que no queda nada por aprender, pero nada mas lejos de la realidad, todavia nos queda lo mejor. 
Las etiquetas vistas hasta ahora son las mas usadas desde hace ya tiempo en las paginas Web, pero con el tiempo y 
debido a las necesidades que acusaban los programadores han ido apareciendo nuevas etiquetas que nos permitiran 
crear efectos realmente atractivos. A estas etiquetas y a su correcto uso en las paginas Web es a lo que hemos 
llamado HTML avanzado y gracias a el aprenderemos a crear los llamados Webs de tercera generation como el 
que podemos ver en la figura 7.1: 


" 225 " 



HTML avanzado 


Figura 7.1. Usando adecuadamente las etiquetas del lenguaje HTML y con algunos 
conocimientos de diseno se pueden crear webs tan atractivos como este. 
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GNOME Hispano 


Bienvenido al web de GNOME Hispano, un lugar en la 
red donde el proyecto GNOME se acerca a los usuarios 
hispanohablantes. 


La intencidn de este web es, primero, promocionar el 
proyecto GNOME en todos los ambitas, y, segundo, 
intentar servirde punto de entrada al proyecto para los 
usuarios/desarrolladoresque lo deseen. De hecho, 
ponemos especial hincapi£ en animar a losque se&is 
programadores paraque entrSis en el desarrollo de 
aplicaciones para el proyecto GNOME , y para ello, 
disponemosde listasde correo y de un servidor CVS en 
el que albergar los proyectosque se vayan creando 
dentrode la comunidad GWOMEhispanohablante. 
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Entre los temas que cubriremos de ahora en adelante destacan: mayor control en la creacion de listas y en el 
alineamiento de los elementos de la pagina, insercion de scripts y hojas de estilo, insercion de applets de Java, 
formularios interactivos, paginas con varias ventanas (los marcos o frames), HTML dinamico, y mas. 

En definitiva todas las novedades que han ido apareciendo en estos ultimos anos el mundo de la programacion de 
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Pero todo lo nuevo tiene, ademas de grandes ventajas, algunos inconvenientes. A1 hablar de HTML, los 
inconvenientes de usar algunas de las etiquetas avanzadas es que no son entendidas por los navegadores y por tanto 
debemos tener cuidado al usarlas. Esto no quiere decir que no las usemos, ya que si no lo hicieramos estarfamos 
desperdiciando algunas de las posibilidades que nos ofrece el lenguaje HTML. La solution es simplemente 
conocer las ventajas e inconvenientes y como subsanar estos ultimos de la mejor manera posible. A esto es a 
lo que dedicaremos gran parte de este capftulo. Para empezar, es interesante (incluso necesario) conocer un poco 
la historia del lenguaje HTML a traves de sus diferentes versiones. 

Estandares y extensiones del lenguaje HTML 

El lenguaje HTML empezo a usarse a gran escala a partir de 1990 cuando Tim Berners Lee, mientras trabajaba en 
el laboratorio Europeo de Ffsica de Particulas (CERN) en Suiza (ver figura 7.2) desarrollo un novedoso sistema de 
distribution de informacion basado en paginas independientes, llamadas paginas web (web pages ) o simplemente 
webs, con posibilidad de hipertexto. Era el nacimiento del World Wide web (de ahora en adelante WWW), que 
podrfa traducirse como la telarana mundial. 
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Figura 7.2. En el CERN (http://www.cern.ch [http://www.cern.ch]), un instituto de fisica 
con poca relacion con Internet, se engendro la idea del World Wide Web. 
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A partir de entonces el WWW no ha parado de crecer y lo que empezo como un pequeno proyecto se convirtio en 
un sistema usado en todo el mundo a traves de la red Internet. En 1995 el WWW se convirtio en el servicio de 
esta red mas utilizado por sus usuarios por delante incluso del e-mail o el FTP (sistema usado para transporte de 
ficheros). 

HTML era el lenguaje usado para crear las paginas individuales que formaban esa telarana mundial. Este era 
un lenguaje muy sencillo que permitfa incluir texto, encabezados, imagenes, formularios simples y muy poco 
mas. Debido a la gran expansion del WWW el HTML empezo a ser usado ampliamente y diversas empresas se 
dieron cuenta del potencial que representaba y empezaron a comercializar programas, posteriormente llamados 
navegadores, exploradores o browsers, capaces de encontrar paginas de esta telarana en Internet e interpretar el 
codigo HTML para presentar la information de las paginas. 

Pero entonces surgio el desorden. Cada una de las empresas u organismos que elaboraban los navegadores 
proponfa su propia interpretation del lenguaje y programaba sus aplicaciones para que fuesen fieles a esa 
interpretacion. Esto causaba verdaderos quebraderos de cabeza a los programadores de webs ya que si preparaba 
su pagina para que funcionase con un navegador no funcionaba con otro o las diferencias eran mas importantes de 
lo se puede considerar como aceptable. 

El estandar HTML 2.0 

Para solucionar este desorden se creo un organismo, el World Wide Web Consortium (de ahora en adelante W3C), 
que se encargarfa de estandarizar todos los temas relacionados con el WWW y por supuesto el lenguaje HTML 
entraba en sus objetivos. En la figura 7.3 podemos ver la pagina de esta organization. 
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Figura 7.3. El World Wide Web Consortium, o W3C, fue creado para regular el World 
Wide Web. Esta regulacion incluye una estandarizacion del lenguaje HTML. 
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► W3C Track at WWW2002 
Announced 


21 March 2002: The W3C Track has been announced 
for the Eleventh International World Wide Web 
Conference (WWW2002) in Honolulu, Hawaii, USA. 

W3C will present three dayson 8-10 May:W3C's 
Achievements and Expectations, Web Services, the 
Semantic Web, XML, Document Formats, Cool Web, 


El primer estandar serio que vio la luz fue el HTML 2.0. Este estandar pretendfa contentar a todos los navegadores 
existentes y en un principio lo consiguio. De hecho podemos considerar que todos los navegadores existentes 
actualmente soportan este estandar, por lo tanto cualquier pagina escrita usando codigo HTML 2.0 podra ser 
visualizado en cualquiera de ellos. Este estandar inclufa: 
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• Texto normal y algunos pocos estilos ffsicos y logicos, pero no se podia variar ni el tamano ni el color. Tambien 
inclufa alguna etiqueta de parrafos como <p> o <br> pero sin ningun atributo. 

• Seis niveles de encabezados. 

• Formularios basicos. 

• Enlaces (tambien llamados links). 

• Imagenes. 

Y muy poco mas. Pronto se demostro que este estandar era insuficiente, y muy pronto las principales empresas que 
habfan creado navegadores, como Netscape Navigator™ y mas tarde Internet explorer™. Empezaron a inventarse 
nuevas etiquetas HTML que, por supuesto, solo serfan validas si se usaba su navegador. A estas nuevas etiquetas se 
las llamo extensiones y entre las mas importantes destacan las tablas, frames, imagenes de fondo, etc. El desorden 
surgio de nuevo. 

El estandar HTML 3.2 

El W3C se apresuro en publicar un nuevo estandar, HTML 3.0, que inclufa algunas de las extensiones de mayor 
exito. Sin embargo este estandar era excesivamente diferente a HTML 2.0. Introducfa muchas etiquetas nuevas, y 
algunas de dudosa utilidad. Por esta razon el propio Web Consortium aconsejo que dejase de usarse. Poco tiempo 
despues aparecio una revision de este estandar el HTML 3.2 que es el que rige actualmente. En este estandar se 
incluyeron: 


• Nuevos elementos para introducir en la cabecera como <script> para incluir codigo de JavaScript o VBScript 
y otros como <style> , <meta>, <base > y «lM$> 

• Nuevos atributos para la etiqueta BODY para poner color o imagenes de fondo y para cambiar el color del 
texto y links. 

• Nuevos atributos para la mayorfa de las etiquetas existentes, 

• La posibilidad de cambiar el tamano y color del texto con la etiqueta <font>. 

• Y por ultimo, y probablemente la mas importante, la posibilidad de usar tablas. 

Sin embargo no todas las extensiones que habfan creado los fabricantes de navegadores fueron introducidas en el 
estandar. Algunas de ellas muy extendidas, como por ejemplo los frames (explicados mas adelante) se dejaron 
fuera, con lo que no se consiguio satisfacer a todo el mundo. Ademas, Microsoft™ ya habfa entrado de lleno en el 
mundo Internet con su navegador Internet Explorer™, lo que propicio una explosion de extensiones. Hoy en dfa 
los programadores de paginas web deben tener en cuenta no solo el lenguaje HTML estandar sino las etiquetas y 
atributos que van incluyendo Microsoft™ y Netscape™. Ambas compamas crearon paginas con informacion sobre 
como hacer paginas web aprovechando todas las caracterfsticas de sus navegadores, al margen de los estandares. 
La figura 7.4 muestra estas paginas tal y como se presentaban hace algunos anos. 
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Figura 7.4. Tanto Microsoft™ como Netscape™ crearon sitios web especialmente 
dedicados a programadores de Internet en el que informan de las tecnologias propietarias 
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soportadas por sus navegadores. 
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HTML 4.0 y XHTML 

Dado el gran incremento de incompatibilidades entre los diferentes navegadores, el W3C hizo un gran esfuerzo 
para reunir a las principales companfas y crear un nuevo estandar que todas se comprometfan a cumplir: HTML 
4.0. Este estandar incluye muchas novedades, algunas muy usadas como los frames. 

HTML 4.0 es tremendamente completo y hay pocas excusas para crear paginas web que usen extensiones. Parece 
que los creadores de navegadores han empezado a dar una mayor importancia al soporte de estandares, lo que 
permite crear paginas web HTML que se vean correctamente por todo el mundo. En particular es destacable 
el esfuerzo del proyecto Mozilla (http://mozilla.org), que ha tornado las riendas del desarrollo del navegador 
Netscape Navigator como software libre. En este proyecto han demostrado un fuerte compromiso por el soporte 
de los estandares y el abandono de las extensiones propietarias. 

En la figura 7.5 podemos ver el comienzo del documento que define este estandar asf como la direction donde 
podemos encontrarlo: 

Figura 7.5. En el servidor web del W3C podemos ver la especificacion del nuevo 
estandar HTML 4.0. La direccion concreta es: http://www.w3c/TR/PR-html40/ 
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[http ://www.w3c/TR/PR-html40/] 
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Navigator, Mozilla, Konqueror, Opera, etc. Su uso sera una garantia de compatibilidad para nuestros sitios webs. 
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Atencion 

Si bien es cierto que usando unicamente etiquetas de HTML 4.0 conseguimos crear paginas que se vean 
en cualquier navegador han aparecido otras tecnologfas como CSS, JavaScript, Applets Java, Flash, etc 
cuyo soporte varfa mucho de unos navegadores a otros. Estas tecnologfas no seran tratadas en este curso, 
pero si queremos advertir de la importancia de que sean usadas de forma que no se obligue al visitante a 
tener un navegador concreto. 

lY que es exactamente XHTML? Pues es una variante de HTML que tiene las mismas etiquetas que HTML 
4.0 (en concreto es identica a la revision HTML 4.0.1), pero con una serie de restricciones de sintaxis para ser 
compatible con XML. Para un navegador no hay diferencias entre usar HTML o XHTML, pero este ultimo puede 
ser util para poder emplear herramientas de tratamiento de XML al crear una pagina web. Las principales normas 
que debemos cumplir para que una pagina HTML sea compatible con XHTML (y por tanto compatible con XML) 
son: 


• La primera lfnea del archivo debe ser: 

< ? xml ver sLiafif=" 1.0 " ? > 

• Todas las etiquetas deben tener instruccion de inicio e instruccion de fin. No esta permitido no poner </p> al 
final de un parrafo on /li> al final de un elemento de una lista, como es habitual en HTML. 

• Las etiquetas de una unica instruccion deben terminar con />. Por ejemplo: 


<img src="img.gif"/ 


• Todos los valores de los atributos deben ir entrecomillados. 


El futuro de HTML 

El lenguaje HTML seguira evolucionando y continuara siendo, con toda probabilidad, la base de las paginas web. 
Conocerlo sera imprescindible para poder aprovechar todas sus ventajas. Por ello seguira usandose directamente 
para crear paginas web muy cuidadas mientras que en otros casos sera ocultado por herramientas que permitan 
crear paginas al estilo de un procesador de texto. Ademas de esto seguiran adquiriendo mayor y mayor importancia 
nuevas tecnologfas que anaden nuevas caracterfsticas a las paginas web como dinamismo o interaction con el 
usuario. 

Entre estas tecnologfas nos encontramos con los ya habituales lenguajes de Script (JavaScript y VBScript). Estos 
son lenguajes de programacion que se insertan en las paginas web junto con el codigo HTML y que nos permitira 
aumentar la interactividad con el visitante respondiendo a algunas de sus acciones como pulsar un boton, pasar 
con el raton por encima de una imagen, etc. 

Por supuesto tambien hemos de mencionar las hojas de estilo que facilitan el mantenimiento de la apariencia en 
las paginas web ademas de darnos mas potencia. 

La suma de HTML con los lenguajes de script y las hojas de estilo ha sido denominado HTML dinamico. 
Desgraciadamente este ha sido el comienzo de una nueva serie de caracterfsticas incompatibles entre navegadores. 
En particular es habitual encontrar paginas que solo pueden verse correctamente en el navegador dominante en 
la actualidad: Internet Explorer™. Esperemos que entre todos los creadores de paginas web podamos presionar 
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para que se tienda a una mayor compatibilidad entre navegadores. Mientras tanto tendremos que tener cuidado en 
hacer paginas que puedan verse en todos ellos. 

Conclusiones 

Bien, ya sabemos todo lo que necesitamos saber sobre la historia del lenguaje HTML, sus estandares y las 
extensiones de los distintos navegadores. Es probable que el lector se haga dos preguntas en este momento I'd 
que estandar pertenecen las etiquetas vistas hasta ahora? y ^Cuales puedo usar libremente?. Todas las etiquetas 
vistas hasta ahora pertenecen en su mayor parte al estandar HTML 2.0. De hecho siempre que no hemos hecho 
mention exphcita de que cierta etiqueta o atributo era nuevo pertenecian a esta version. Tambien hemos visto 
gran parte de las etiquetas del estandar HTML 3.2, en general las mas importantes y de mayor uso. En ocasiones 
hemos dicho explicitamente que esta o aquella etiqueta pertenecian al HTML 3.2, ahora sabemos que sentido tenia 
remarcarlo. 

^Porque lo hemos hecho asi? Uno de los objetivos que nos planteamos desde el principio fue que nuestras paginas 
pudiesen ser vistas por todo el mundo, de esta manera podriamos llegar a la mayor cantidad de publico posible. 
Con esta finalidad hemos aprendido a usar etiquetas que pueden ser vistas por casi todo el mundo. Las etiquetas 
de HTML 2.0 pueden ser vistas por todo el mundo mientras que las etiquetas del lenguaje HTML 3.2 vistas hasta 
ahora estan muy extendidas y causan problemas al ser vistas con navegadores antiguos. En definitiva, todas las 
etiquetas que ya conocemos pueden ser usadas con gran libertad con la garantia de no estar limitando que nuestras 
paginas puedan ser vistas unicamente por los usuarios de las ultimas versiones de Navigator™ o Explorer™. Si 
tenemos mayores requerimientos y queremos estar seguros de que nadie tendra problemas al ver nuestras paginas 
debemos considerar algunos aspectos mas. 

El W3C ha puesto un servicio publico que permite ver si una determinada pagina cumple los estandares o no. Esta 
disponible en http://validator.w3.org/ 

Tambien hay un programa, llamado Tidy™ que permite hacer la validation en un archivo local, sin tener que 
publicarlo en Internet. Este programa es software libre y esta disponible en http://tidy.sourceforge.net/. 

tQue etiquetas debo usar y como? 

Podemos asumir que todas las etiquetas del estandar HTML 4.0 son entendidas por cualquier navegador. Eso sf 
debemos tener en cuenta que el uso de frames o tablas complicadas puede dihcultar su interpretation correcta en 
navegadores de texto o hablados (como los usados por personas ciegas o en coches). 

Si optamos por emplear una extension hay que ser consciente de que navegadores lo soportan y como afectara a 
los usuarios de el resto. Teniendo esto en cuenta hay que considerar: 


• Si los usuarios a los que va dirigido el web poseen alguno de dichos navegadores. 

• Que perjuicios tendran aquellos usuarios que no lo tengan. Por ejemplo, nunca debemos incluir information 
vital usando una extension si existe el riesgo de que cierto tipo de usuarios con navegadores antiguos no puedan 
acceder a ella. Es decir, la information muy importante debe ser incluida con etiquetas de HTML 2.0 para que 
todo el mundo pueda verla. 
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Si usamos con cuidado las extensiones, podemos evitar que causen mucho perjuicio a los usuarios que usen 
navegadores que no las soporten, y los usuarios que si que tengan los navegadores adecuados saldran beneficiados. 
Para conseguir esto es necesario conocer bien estas extensiones y el comportamiento de un navegador cuando se 
encuentra con alguna etiqueta o atributo que no soporta (que no entiende). Esto ultimo no es dificil de entender: 
si un navegador se encuentra con una etiqueta que no conoce simplemente la ignora y lo mismo ocurre con los 
atributos. 

cQue queda por aprender? 

En este mismo capitulo veremos las etiquetas del estandar HTML 3.2 que todavia nos queda por ver a excepcion 
de los formularios que seran vistos proximamente. En los siguientes capitulos aprenderemos a usar las extensiones 
de Microsoft Explorer™ y Netscape Navigator™ para aprovechar las ultimas capacidades de estos navegadores 
pero sin causar problemas a los usuarios de los navegadores mas antiguos o navegadores en modo texto. Segun 
vayamos estudiando estas nuevas etiquetas aprenderemos tambien a usarlas adecuadamente. Un buen ejemplo de 
una de las mas importantes extensiones del lenguaje HTML, los frames, es la pagina web de la figura 7.6: 
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Figura 7.6. En esta figura vemos un excelente uso de los frames o marcos, que dividen la 
pantalla en cuatro partes para facilitar la navegacion. 
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En ella podemos ver como adelanto al capftulo posterior en el que trataremos esta extension a fondo, que los 
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frames sirven para dividir la pantalla en varios marcos con una pagina diferente en cada una. En este caso se ha 
dividido la pantalla en cuatro marcos. 

En los capitulos que seguiran trataremos las tecnicas para incluir contenido dinamico en nuestras paginas, incluido 
el nuevo lenguaje HTML Dinamico que constituye por si solo una nueva revolution en el World Wide Web. 

En definitiva nos queda por estudiar las etiquetas mas novedosas del lenguaje HTML y ottos acompanantes 
que nos ayudaran en la programacion de paginas web y nos permitiran crear efectos realmente impactantes y 
sorprendentes. Empecemos con ello sin perder mas tiempo. 

Extensiones a las listas 

Las etiquetas y attibutos que aprendimos a crear en el capitulo 4 pertenecen al estandar HTML 2.0. Con ellas 
podiamos crear listas de diferentes tipos y anidarlas para crear interesantes efectos. Sin embargo tras unos anos 
trabajando con estas etiquetas los programadores de HTML empezaron a sugerir algunas ideas para conseguir un 
mayor control sobre las listas. 

El primer paso para satisfacer estas ideas fue la insertion de nuevos attibutos en el estandar HTML 3.2 y estos son 
los que veremos a continuation. 

Nota 

El siguiente paso se ha dado con la creation de las hojas de estilo. Estas no son mas que un metodo 
nuevo con el que se nos ofrece a los programadores la posibilidad de especificar las caracterfsticas de 
cada uno de los elementos de nuestras paginas web. En lo que a listas se refiere podemos indicar que la 
vineta de una lista no numerada sea de una manera determinada, que el tamano de los elementos de la 
lista vayan decreciendo, etc. O incluso podemos crear diferentes subtipos de listas. Las hojas de estilo 
son de reciente aparicion y por tanto no estan bien soportadas por los navegadores aunque ya podemos 
aprovechar gran parte de sus ventajas y por ello seran adecuadamente cubiertas en un capitulo posterior. 

Las novedades que esta nueva version del estandar introdujo se refieren a las bstas ordenadas, OL, y a las listas no 
ordenadas, UL, que son en definitiva las mas usadas. Estas novedades afectan tambien a la subetiqueta LI. 

Listas no ordenadas 

Para aumentar el control sobre la apariencia de las listas no numeradas o no ordenadas se introdujo un nuevo 
atributo: TYPE. Con el podremos cambiar el tipo de vineta de los elementos de la lista. Los tipos de vinetas 
disponibles son: 


• TYPE= "Circle": El simbolo es un circulo, es decir, una circunferencia no rellena. 

• TYPE= "Square": La vineta es un cuadrado. 

• TYPE="Disk": Similar a Circle, pero ahora la circunferencia si esta rellena. Este tipo es el que aparecia por 
defecto cuando no usabamos el atributo TYPE. 
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Quiza al lector que haya practicado con anidamiento de listas le resulten familiares estos tipos de vinetas. Si 
recordamos al anidar listas el tipo de vineta de cada nivel de anidamiento era distinto. Pero ahora nosotros 
tendremos libertad para elegir cuando debe usarse cada uno. 

Veamos algunos ejemplos. El primero de ellos sera una lista de tipo Disk. En el se muestra un listado de algunos 
de los principales navegadores, y el codigo usado es: 


<UL type=" circle”* 

<1.T> 

Ms Internet Explorer™ 
<LI> 

Netscape Navigator™ 
Opera™ 

Lynx™ 

«/ps> 


Si queremos hacer esta misma lista pero con vinetas cuadradas tendremos que escribir: 


<UL TYPE="square"* 

Ms Internet Explorer™ 
•CGI* 

Netscape Navigator™ 
<1,1* 

Opera™ 

<tl> 

Lynx™ 


En la figura 7.7 podemos ver ambos ejemplos junto con un tercero que se obtiene no usando el atributo TYPE o 
usandolo con el valor TYPE="disc". 
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Figura 7.7. En HTML 3.2 existen 3 tipos de vinetas para las listas no ordenadas. Con el 
atributo TYPE podemos elegir entre ellos. 



En la figura 7.8 vemos estos tres ejemplos de nuevo, pero esta vez visualizandolos con Netscape Navigator™. 

Figura 7.8. Comparando esta figura con la anterior vemos la similitud entre las 
distintas vinetas de los elementos de las listas usadas por Netscape Navigator™ e Internet 
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Explorer™. 



Es importante apreciar que no existen practicamente diferencias, quiza la unica sea la variation de tamano de los 
sfmbolos de algunas vinetas. 

Hasta ahora hemos usado el atributo TYPE en la etiqueta que definfa el tipo de lista, es decir, en la etiqueta UL. 
De esta forma el cambio en el tipo de vineta afectaba a todos los elementos de lista. Sin embargo tambien puede 
usarse en la etiqueta LI, y de esta forma conseguimos que el cambio de vineta solo afecte a un elemento de lista 
concreto. La mejor manera de ver este efecto es con un ejemplo y por ello vamos a retomar el primero de los tres 
vistos antes pero cambiando el tipo de vineta del navegador Lynx™. Esto podrfa servimos en un ejemplo real para 
indicar que este navegador es un navegador en modo texto, mientras que los demas son navegadores graficos. El 
codigo que debemos usar es: 


<UL TYPE="circle"> 

<I,I> 

Ms Internet Explorer™ 
<L1> 

Netscape Navigator™ 
<I,I> 

Opera™ 

<LI TYPE="disc"> 

Lynx™ 

</m> 


En la figura 7.9 podemos ver el resultado. 
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Figura 7.9. Usando el atributo TYPE en una etiqueta LI podemos cambiar la vineta de 
un unico elemento de lista sin afectar a los demas. 



Con esto podemos dar por terminadas las novedades de las listas no ordenadas, pasemos a las ordenadas. 

Listas ordenadas 

Este tipo de listas tiene alguna novedad mas que las anteriores. Para empezar tambien le ha sido anadido un 
atributo cuyo nombre es TYPE. Pero ahora la funcion que desempena es ligeramente distinta, si antes cambiaba el 
tipo de vineta ahora cambiara el tipo de numeracion. En la tabla 7.1 podemos ver los cinco tipos distintos que hay 
y el valor que debe tomar el atributo TYPE para elegir cada uno: 
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Figura 7.1. Los cinco tipos distintos que puede tomar el atributo TYPE para listas 
ordenadas 


TYPE= 

Estilos de numeracion 

Tipos 

Ejemplo 

1 

Numeros arabes 

1, 2, 3, ... 

a 

AJfabetico en minus culas 

a, b, c, ... 

A 

AJfabetico en mayus culas 

A, B, C, ... 

i 

Romano en minus culas 

i, ii ? iii ? ... 

I 

Romano en mayus culas 

I n, 


Siguiendo con la lista usada como ejemplo anteriormente, ahora podrfamos numerar los elementos de lista con 
letras escribiendo el siguiente codigo: 


<i.i> 

Ms Internet Explorer™ 

Netscape Navigator™ 

<ta>. 

Opera™ 

<SLI;> 

Lynx™ 

</OL> 


Cambiando el valor del atributo TYPE por cada uno de los que vefamos en la tabla 7.1 obtendremos todos los 
tipos de numeracion tal y como apreciamos en la figura 7.10: 
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Figura 7.10. Con el atributo TYPE podemos elegir entre 5 tipos distintos de numeration 
en las listas de HTML. En esta figura vemos los 4 nuevos. 


Q Tipos de listas numeradas - Microsoft Internet Explorer 


Archivo Edicion Ver Ir a Favoritos Ayuda 

^^ J 1 (3 ® S0 g M B #W 


1 

TYPE="a" 1 


TYPE="A" 1 


TYPE="i" 

a. 

Ms Internet Explorer 

A. 

Ms Internet Explorer 

i. 

Ms Internet Explorer 

b. 

Netscape Navigator 

B. 

Netscape Navigator 

ii. 

Netscape Navigator 

c. 

Opera 

C. 

Opera 

iii. 

Opera 

d. 

Lynx 

D. 

Lynx 

IV. 

Lynx 

g Listo 
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A1 igual que en el caso de las listas no ordenadas podemos usar el atributo TYPE con cada una de las etiquetas LI. 
Sin embargo ahora el efecto es menos util que antes, ya que, en general, cambiar el tipo de numeration (OJO, no 
se vuelve a empezar desde cero) para algunos de los elementos de lista confunde al navegante que vaya a verla. 

La siguiente novedad introducida por la version 3.2 del estandar del lenguaje HTML para las listas ordenadas es el 
atributo START. Si bien las listas que hemos creado hasta ahora comenzaban siempre por 1 (o por a, A, i, I, segun 
el tipo de numeration) con este atributo podemos elegir porque numero (o letra) comenzara el primer elemento 
de lista. Esto suele ser util cuando tenemos que partir una lista en dos porque queremos insertar algo en medio y 
queremos retomar la numeration despues. Este atributo tiene como valores posibles todos los numeros naturales 
(1, 2, 3,...) 

Si en cada uno de los ejemplos de la figura 7.10 ponemos el atributo START con el valor 10 obtendremos el 
resultado de la figura 7.11: 


W 
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Figura 7.11. Si usamos el atributo START podemos variar el numero (o letra en estos 
casos) por los que se empiezan a numerar los elementos de la lista. 



Aunque en esta figura no esta el tipo de numeration arabigo (1, 2, 3,...) los resultados de este tipo de numeration 
son facilmente previsibles. 

El atributo START no puede ser usado de manera independiente en cada elemento de lista, LI. Si embargo si 
que existe otro atributo que nos permitira cambiar el numero que precede a cada elemento de lista: VALUE. Este 
atributo funciona de manera muy similar a START, toma como valor un numero natural y lo convierte al tipo de 
numeration que usa esa lista. Por ejemplo podnamos crear una lista con numeration romana impar de la siguiente 
manera: 


<0L TYPE="i"> 

<a#i VALUE=1> 

Ms Internet Explorer™ 
<1,2 VALUE=3> 

Netscape Navigator™ 
<T;I VALUE=5> 

Opera™ 

<LI VALUE=7; > 

Lynx™ 

</OL> 


Que nos da el resultado de la figura 7.12: 
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Figura 7.12. Con el atributo VALUE podemos indicar el valor de la numeracion de cada 
uno de los elementos de las listas numeradas. 



Con este atributo ya podemos dar por terminadas las novedades introducidas por HTML 3.2 en la creation de 
listas. Pero aun queda por comentar un ultimo atributo que existe desde las primeras versiones del lenguaje 
HTML: COMPACT. Este atributo puede ser usado en cualquiera tipo de lista: UL, OL, MENU, DIR y DL, y 
su funcion es decirle al navegador que intente comprimir el tamano que ocupa la lista al maximo, por ejemplo 
reduciendo el espacio entre cada uno de los elementos de lista. La forma de usar este atributo es simple y no toma 
ningun valor. Siguiendo con el ejemplo usado hasta ahora podrfamos usar el siguiente codigo: 


<0L COMPACT; > 

<I,I> 

Ms Internet Explorer™ 
<LI> 

Netscape Navigator™ 
<LI> 

Opera™ 

<LI> 

Lynx™ 

</OL> 


El problema de este atributo es que en general los navegadores lo ignoran y muestran la lista exactamente igual 
que las demas. Si el lector prueba el codigo de este ultimo ejemplo en Navigator™ o Explorer™ probablemente 
no notara ninguna diferencia por haber usado COMPACT, aun asi hemos considerado recomendable comentar su 
existencia. 
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Alineamiento 

Este no es un tema nuevo. En gran parte de las etiquetas que hemos visto hasta ahora existfa el atributo llamado 
ALIGN, que aunque variaba en su funcionamiento ligeramente de unas a otras cumplfa la funcion principal 
de permitirnos elegir el alineamiento de los elementos en la pagina. Algunos ejemplos de etiquetas donde nos 
encontramos con este atributo son IMG, P y TABLE. Tambien vimos la etiqueta CENTER. Con ella podlamos 
centrar cualquier elemento que insertaramos en una pagina web sin mas que situar el codigo correspondiente entre 
la instruction de inicio <center > y la instruction de fin </center> . De esta forma consegulamos alinear 
elementos cuyas etiquetas no tuviesen el atributo ALIGN. 

Y...^hace falta algo mas? Quiza lo unico que se echa en falta es algo de uniformidad. El atributo ALIGN surgio en 
algunas etiquetas por la inexistencia de otro medio de alineamiento. La etiqueta CENTER no pertenetia al HTML 
2.0 y fue una invention de Netscape ™. A pesar de ello empezo a usarse masivamente y el web Consortium se vio 
obligado a incluirla en el estandar HTML 3.2. 

Pero su enfoque del tema era algo distinto y por ello ademas de incluir la etiqueta CENTER se creo una nueva: DIV 
. La funcion de esta etiqueta es realizar divisiones en las paginas de manera que podamos indicar las propiedades de 
cada una de estas divisiones por separado. Por ahora la unica propiedad que podemos controlar es el alineamiento 
horizontal haciendo uso del conocido atributo ALIGN. Este atributo puede tomar los, ya conocidos, valores: 
LEFT, CENTER, RIGHT. Es decir, para usar esta etiqueta deberemos escribir el siguiente codigo: 


<DIV ALIGN= n CENTER"> 

. . . Cualquier etiqueta . . . 
</DIV> 


En este caso hemos usado como ejemplo el valor CENTER, en la figura 7.13 podemos ver un ejemplo con cada 
uno de los tres valores posibles en los que hemos alineado de una vez un parrafo una lista y una imagen. 
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Figura 7.13. Con la nueva etiqueta DIV podemos cambiar el alineamiento de todo tipo de 
elementos HTML (imagenes, listas, parrafos, etc.) de una sola vez. 
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Nota 

En su idea original usar <div ALiGN="center" > debfa ser equivalente a usar <center > pero por 
unas razones o por otras el efecto no es el mismo y por ello la etiqueta DIV no es muy usada. 

En el estandar HTML 4.0 la funcion de la etiqueta DIV sufrira un cambio fundamental. En este estandar se 
desaconseja su uso para elegir el tipo de alineamiento, ya que se aconseja que eso se haga con hojas de estilo. 
La funcion de DIV sera entonces seleccionar el idioma usado u otras caracterfsticas relacionadas con las hojas de 
estilo que veremos mas adelante. 

Nota 

Internet Explorer™ introdujo como extension el valor ALIGN="justify". Mas tarde ha sido adoptado por 
Netscape™ y tambien ha sido incluido en el estandar HTML 4.0 (Cougar). La funcion de este atributo es 
justificar los margenes tanto derecho como izquierdo de la misma manera en que lo estan estas columnas 
de texto de esta publication. 

La etiqueta META 

Uno de los mejores metodos para aprender nuevas tecnicas en la programacion HTML consiste en examinar el 
codigo de las paginas que han creado otros. Desde hace ya algun tiempo empezo a proliferar el uso de una etiqueta, 
de nombre META, que, si bien existe desde los comienzos del lenguaje HTML, era una gran desconocida. Incluso 
hoy en dfa muchos programadores de paginas web no conocen el significado de esta etiqueta. A grandes rasgos 
podrfamos decir que la etiqueta META sirve para describir las caracterfsticas de la pagina web. La forma en que 
esta information es usada no esta siempre determinada, con lo que la mejor forma de aprender a usar la etiqueta 
META es mediante una serie de ejemplos. 

Carga automatica de paginas 

Esta es, sin duda, la funcion mas util de todas las que puede desempenar la etiqueta META y consiste en cargar 
automaticamente una pagina desde la actual transcurridos unos segundos sin que el usuario tenga que hacer nada. 
Para conseguir esto debe incluirse en la cabecera del documento HTML, es decir entre <head > y </head> la 
siguiente lfnea: 


<META HTTP-EQUIV="Refresh" 
CONTENT="5" 

URL="http://es.gnome.org"> 


Cuando una pagina tenga esta lfnea de codigo cargara la pagina es.gnome.org [http://es.gnome.org] pasados 5 
segundos de la carga de dicha pagina. Por supuesto el numero de segundos y la direction a la que queremos que 
se salte se pueden cambiar. Ambos datos deben estar entre comillas y separados por punto y coma, tal y como se 
muestra en el ejemplo anterior. 

Informacion para los buscadores 

Todos los navegantes del WWWW hemos usado en alguna ocasion alguno de los buscadores como Yahoo (figura 
7.14), Altavista, Ole, Ozu, o algun otro. 
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Figura 7.14. Los buscadores permiten a los navegantes encontrar la informacion que 
buscan. Usando la etiqueta META podemos proporcionarles datos para que incluyan 
nuestras paginas en sus bases de datos. 



m 



Hew Cool Today's Hews More Y: 


Yahoo! Mail 

free email 



Tax Cer 

tips, online 


r 


Search 


options 


Yahoo! Visa - no annual fee, online shopping guarantee, rewards - apph 


Yellow F ages - Feople Search - Maps - Classifieds - Personals - Chat - Email 
Shopping - My Yahoo! - News - Sports - Weather - Stock Quotes - more... 


Arts and Humanities 

Architecture. Photography. Literature ... 

Business and Economy [Xtrail 

Companies. Finance. Employment ... 

Computers and Internet [Xtrail 

Internet, WWW. Software. Multimedia ... 


News and Media [Xtrail 

Current Events. Maga^inas TV. 1 

Recreation and Sports [Xtr 

Sports. Games. Travel Autos. Qu 

Reference 

Libraries. Dictionaries. Fhone Nuj 


| Zona de Internet 


Estos buscadores tienen una serie de programas llamados aranas, webbots o bots que navegan por la red reclutando 
paginas para incluir en su buscador. Si incluimos en nuestra pagina cierta informacion es muy probable que incluya 
nuestra pagina en la base de datos del buscador. Entre la informacion que puede necesitar el webbot esta el autor 
de la pagina, una breve descripcion de la misma, palabras clave que la definan, etc. Para insertar estos datos 
haremos uso de los atributos NAME y CONTENT de la etiqueta META. Por ejemplo en la pagina de Los Alpes 
sera conveniente anadir: 


75 * 
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<META NAME="author" 

CONTENT="WebMaster de Los Alpes"> 


<META NAME="keywords" 

CONTENT ="viajeS/ Ofertas, Los Alpes, Orlando, Nueva 
Zelanda"> 


<META NAME="description" 

CONTENT="La agenda de viajes Los Alpes tiene its 
gran prestigio en el mundo de las empresas y 
combina una gran calidad con unos excelentes 


Otros usos 

La etiqueta META tiene tres atributos HTTP-EQUIV, NAME y CONTENT. Normalmente se pone una de las dos 
primeras para indicar el nombre de la informacion que vamos a incluir y siempre se usa CONTENT para insertar 
dicha informacion. El atributo HTTP-EQUIV sirve para insertar informacion relacionada con el protocolo HTTP. 
Este es el lenguaje con el que habla el ordenador donde hay un navegador para pedirle paginas a un servidor web 
y con el que responde este al servir (mandar) dicha pagina. Un ejemplo de su uso es el que vefamos al principio 
de solicitar otra pagina transcurridos unos segundos. Otro posible ejemplo serfa indicar una fecha a partir de la 
cual la pagina no debe ser servida. 

El atributo NAME tiene un significado mucho mas general y puede ser usado con multitud de propositos. Ya 
hemos visto que puede servir para mandar informacion a los buscadores y tambien suelen ser usados por los 
editores HTML que generan el codigo HTML automaticamente para incluir informacion especifica. 

Otras etiquetas del lenguaje HTML 3.2 

Ya casi podemos dar por concluido el aprendizaje del lenguaje HTML 3.2. Conocemos practicamente todas las 
etiquetas y todos los atributos que existen en este estandar. En este apartado vamos a explicar lo poco que nos 
quedan para dar por terminado del todo nuestro aprendizaje de esta version del estandar. Las etiquetas que vamos 
a comentar a continuacion no tienen demasiada relacion entre sf, y no han sido explicadas hasta ahora por que son 
raramente usadas, porque muchos navegadores no las entienden o porque necesitamos conocer algunas cosas mas 
para entender su funcionamiento. 

Descriptor de tipo de documento 

Pero antes de empezar vamos a introducir un nuevo concepto que todavia no habfamos mencionado: el descriptor 
de tipo de documento. Aunque suene extrano, no lo es, nos referimos a una declaracion que segun el estandar todas 
las paginas web deben tener para ser consideradas como HTML. Esta declaracion ocupa una sola linea e incluira 
tambien informacion sobre la version de HTML que hemos usado. No es necesario incluir este descriptor en 
nuestras paginas para que los navegadores la interpreten como HTML, sin embargo incluirlo no causa demasiado 
trabajo, y estaremos cumpliendo con el estandar. Algunos de estos descriptores mas comunmente usados son: 
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<!DOCTYPE HTML 

PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> 


<!DOCTYPE HTML PUBLIC "-//IETF//fig HTML 2.0//EN"> 


Todos empiezan por la cadena <!DOCTYPE el res to no es necesario entender que significa a exception de la 
cadena HTML 3.2 del primero que indica que hemos usado etiquetas del ese estandar y HTML 2.0 del segundo 
que indica lo mismo esta vez con la version 2.0 del estandar. El descriptor de tipo de documento debe ser la 
primera lfnea de la pagina, con lo que ahora la estructura basica sera: 


<!DOCTYPE HTML 

PUBLIC "-//W3C//DTD HTML 3,2 Final//EN"> 
<HTML> 

<HEAD>...</HEAD> 

. . . Codigo . . . 

</BO:)Y> 

</HTML> 


Otras etiquetas 

Existen unas pocas etiquetas del lenguaje HTML 3.2 que no hemos comentado todavia por diversos motivos. 
Hemos querido enumerarlas y dar una breve description para que el lector pueda dar por concluido el aprendizaje 
de la version estandar de este lenguaje. En los siguientes capftulo abordara a fondo las extensiones de Netscape™ 
y Microsoft ™. 

Las etiquetas de HTML 3.2 que todavia no hemos visto son: 


• APPLET : Esta es la etiqueta que se usa para insertar applets de Java y sera estudiada mas adelante. 

• STYLE : Esta etiqueta esta compuesta por una instruction de inicio, <style> y otra de fin </style> y debe 
ser usado en la cabecera de la pagina. En su interior se introduce el codigo de las hojas de estilo que trataremos 
mas a fondo en los ultimos capitulos dedicados al lenguaje HTML. 

• SCRIPT : Aunque el estandar HTML 3.2 no soporta los lenguajes de script si admite la existencia de esta 
etiqueta admitiendo que en un futuro sera usada con este fin. Las extensiones de Netscape™ y Explorer™ la 
usan para insertar JavaScript y VBScript. Estos lenguajes son muy importantes en la programacion Internet y 
por tanto tambien estan incluidos en esta obra. 

• FORM: Con la etiqueta FORM y una serie de subetiquetas podremos crear formularios interactivos mediante 
los cuales un usuario podra mandamos datos. La creation de estos formularios no se limita a la programacion 
HTML, sino que tambien hay que tratar de alguna forma la information que se recibe. Por esta razon hemos 
preferido explicar los formularios un poco mas adelante. 

•ISINDEX: Este es un metodo antiguo para crear formularios interactivos. Su uso esta desaconsejado y por 
tanto solo comentaremos su existencia. 

Ahora si, ya podemos dar por terminado el aprendizaje del lenguaje HTML estandar. A partir de ahora 
aprenderemos a crear los efectos mas atractivos que podemos encontrar hoy en dfa en el World Wide web. 
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Una de las extensiones usadas mas habitualmente el WWW son los marcos o frames. A algunos programadores 
les horroriza la idea de que sus paginas tengan frames, otros no entienden como han podido vivir sin ellos hasta 
ahora. Pero, lo que esta claro es que existen paginas web donde se ha demostrado que al menos en ciertos casos 
un buen uso de frames mejora mucho la experiencia del navegante. 

En este capitulo se explica como usarlos y usarlos bien. Entre las caracteristicas avanzadas se vera como anidar 
framesets para crear estructuras complejas, como manejar y ocultar los hordes y como decidir en que frame 
debe mostrarse el resultado de un enlace. Despues pasaremos a explicar la quinta practica del curso, en la que 
anadiremos frames a la pagina web de Los Alpes. Como guinda, aprenderemos a usar frames flotantes, un recurso 
que forma parte del estandar HTML 4.0 pero que no es muy usado aun. 

Los frames consisten en una tecnica para insertar varios documentos HTML en una sola ventana del navegador. 
Para ello divide la pantalla en varias zonas o secciones que reciben el nombre d & frames o marcos. En cada uno de 
estos marcos debemos insertar un contenido, que en general constara de un documento HTML, aunque tambien 
puede ser una imagen o algun otro elemento del WWW visualizable por los navegadores. En la figura 8.1 podemos 
ver un ejemplo de Explorer ™ dividido en 4 frames: 
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Figura 8.1. Los frames nos permiten dividir la ventana del navegador en varias secciones 
diferentes. En este caso la ventana a sido dividida en 4 frames. 


0 Ventana del navegador dividida en 4 frames - Microsoft Internet Explorer 

Archivo Edicion Ver Ir a Favoritos Ayuda 

Direci 

I 4= - B & © (3 ^ Sa 0 § 

I a®#a 

ESTE ES EL 
FRAME 1 

ESTE ES EL 
FRAME 2 

ESTE ES EL 
FRAME 3 
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FRAME 4 
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Una de las ventajas de los frames es que cada uno de los documentos HTML puede ser cambiado sin que ello 
afecte al resto. Ya en el capltulo anterior (figuras 9.1 y 9.6) vimos algunos ejemplos de uso de frames que nos 
pueden ayudar a hacernos una idea de su funcionamiento y de los que seremos capaces de hacer tras este capltulo. 

Ademas de sus ventajas los frames tambien tienen algunos inconvenientes. Por ello desde su aparicion en la 
version 1.0 del navegador Netscape Navigator™ han sido el foco de una gran controversia. Uno de los principales 
problemas de los frames es el hecho de ser una extension del lenguaje HTML y no formar parte del estandar. Por 
esta razon no todos los navegadores estan preparados para ellos y no podran visualizar paginas que contengan 
frames. Pero afortunadamente, hoy en dla la mayor parte de los navegadores graficos los soportan. Entre estos 
se incluyen Netscape Navigator 1.0™ o superior (por supuesto), Microsoft Internet Explorer 3.0 ™ o superior y 
Opera 3.0™. Ademas existen metodos para solucionar el problema de los navegadores no compatibles. 
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Nota 

Actualmente todos los navegadores graficos habitualmente usados desde ordenadores personates soportan 
el uso de frames. Sin embargo en navegadores para dispositivos moviles, navegadores textuales y 
navegadores que leen la pagina el uso de frames puede ser perjudicial. 

El segundo gran foco de la controversia es mucho menos tecnico y radica en la discusion de si los frames son utiles 
o no. Probablemente el origen de esta discusion surgio con el BOOM sucedido cuando aparecieron los frames. 
Debido a lo novedoso del tema, una gran parte de los programadores de paginas Web empezaron a usar frames 
indiscriminadamente, con lo que el WWW se poblo de ellos y en la mayorfa de los casos estos solo eran usados 
porque eran algo nuevo, pero perjudicaban la navegacion. Por esta razon empezaron a surgir detractores de los 
frames. Pero, ahora, pasado un tiempo ya no existen tantos sitios Webs que usan frames de manera abusiva, con 
lo que aquellos que discutfan empiezan a llegar a un acuerdo. Lo que casi todo el mundo parece admitir es que en 
ciertas ocasiones, como la que nos encontramos en el Web de la figura 8.2, el uso de frames puede ser conveniente 
y ayuda a la navegacion, que es en definitiva el motivo por el que surgieron en primer lugar. 
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Figura 8.2. En el Web www.chess.com[http://www.chess.com] podemos ver un excelente 
ejemplo del uso de frames para mantener visibles las barras de navegacion. 



En este Web existen tres frames. A la izquierda se ha usado uno como barra de navegacion donde se encuentran 
enlaces a las distintas secciones. En la parte superior nos encontramos con un segundo frame que contiene el 
encabezado grafico de la pagina con el logo de los Aficionado asf como otros links. El tercero de los frames es el 
que ocupa una mayor area, y en el se encuentra el contenido de la pagina Web. El objetivo de los frames en este 
caso consiste en mantener siempre visible el encabezado y barra de navegacion mientras el visitante se mueve por 
el contenido principal usando las barras de desplazamiento, las cuales, como podemos observar, solo afectan al 
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tercero de los frames. En definitiva los frames son, sin duda, utiles para mantener visibles barras de navegacion 
(graficas o simplemente enlaces hipertexto) o encabezados y/o logotipos muy importantes aunque el navegante se 
desplace por el contenido de la pagina o navegue por el sitio Web. 

Sin perder mas tiempo vamos a empezar ya a estudiar las etiquetas y atributos necesarios para crear los frames. 
Para empezar vamos a ver un atributo, TARGET, y una etiqueta, BASE, que estan enormemente relacionados 
con la creacion de paginas con frames. Posteriormente nos adentraremos en las etiquetas necesarias para crear la 
estructura de frames en las paginas. 

El atributo TARGET 


El atributo TARGET es, al igual que los frames, una extension introducida por Netscape™ y adoptada posterior¬ 
mente por Explorer™ y Opera™. El principal uso de este atributo es cuando se usa en la etiqueta A para crear 
enlaces y su funcion es indicar el objetivo (TARGET significa diana u objetivo) en el que se debe cargar la pagina 
a la que saltamos tras seleccionar el texto o imagen de ese enlace. La forma de usar este atributo es: 


<A HREF="URL n TARGET= H nombre_ventana n > 


Aunque este atributo fue creado para los frames y es en ellos donde adquiere su verdadera utilidad tambien puede 
ser usado aunque estos no existan. Cuando el navegante selecciona un enlace que usa el atributo TARGET busca 
una ventana o frame (posteriormente veremos como se crean y como se les da nombre) cuyo nombre coincida con 
el que hemos indicado como valor de TARGET. Si existe, muestra la pagina a la que nos conduce el enlace en esa 
ventana o frame, pero si no existe abre una nueva ventana del navegador y la da el nombre indicado. En la figura 
8.3 vemos una pagina con dos frames: 
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Figura 8.3. Usando el atributo TARGET podremos lograr que pulsando el enlace de un 
frame el resultado se muestre en otro. 



En la de la derecha hemos incluido un enlace usando como destino (TARGET) el frame de al lado. La flecha nos 
indica que al pulsar sobre el enlace aparece una nueva pagina en el frame de al lado. 

Posteriormente tendremos tiempo para practicar con frames, ahora vamos a ver un ejemplo del uso de este atributo 
en una pagina sin ellos, como las que hemos visto hasta ahora. Abrimos nuestro editor de texto o HTML favorito 
y creamos un archivo nuevo al que llamaremos madre. htm con este codigo: 


<1DQCTYPE HTML 

PUBLIC "-//W3C//DXP HTML 3.2 Final//EN"> 


<HTML> 


” 252 ” 


:head> 
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<HTtE> 

Ventana Madre 
</TITLE>' 

</HEAD> 

<BODY BGCOtCR "*KBB301"> 

<H1> 

Esta es la ventana Madre que generara resto 
<p> 

<A HREF="vefltanal.hfestl** 

TARGET="primera_ventana"> 

Abrir 

</A> 

una nueva ventana llamada primera_ventana 
<P> 

<A HREF='Ventana2.htW;!t 

TARGET="segunda_ventana"> 

Abrir 

una nueva ventana llamada segunda_ventana 

<p> 


<A HREF="vefltana3.Kfcift* 
TARGET="primera_ventanA l,; > 
Poner 


contenido <STRONG>nuevo 
</STRONG> en la p r i rner a _ v e n t a n a 

</BODY> 


Posteriormente debemos crear los archivos ventanal. htm, ventana2 . htm y ventana3. htm, que tendran un 
codigo muy simple en el que simplemente debemos poner un texto que diga que ventana es esa. Por ejemplo en 
el caso de ventanal. htm podemos escribir el siguiente codigo. 


<!DOCTYPE HTML 

PUBLIC "-//W3C//PiB HTML 3.2 Final//EN"> 


<HTML> 

<HEAD> 

<TITLE>' 

Pagina .1 
</TITLE> 

</HEAD> 

<BODY> 

<H1> 

Esta es la pagina 1 
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Esta pagina debe mostrarse en la ventana 

<STRONG>priifteta_ventana 

</STRO&£> 

</BODY> 

</l|§§§§& 


Creamos el resto de archivos con un codigo similar a este y abrimos el archivo madre. htm con el navegador que 
prefiramos. A continuation seguimos los siguientes pasos: 


1. Pulsamos sobre el primero de los enlaces. Observaremos que se crea una nueva ventana con el contenido de 

paginal.htm. 

2. Pulsamos sobre el segundo enlace. Se vuelve a crear una nueva ventana, esta vez con el contenido de 

pagina2.htm. 

3. Pulsamos sobre la palabra ’Poner’ para activar el tercero de los enlaces. En este caso el navegador busca 
una ventana de nombre primera_ventana y la encuentra, porque fue creada en el paso 1. Una vez encontrada 
muestra en ella el contenido de pagina3. htm quitando el contenido de paginal. htm. 

Tras llevar a cabo estos pasos deberfamos obtener el resultado de la figura 8.4, en la que vemos la ventana madre 
y las otras dos abiertas: 
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Figura 8.4. Este debe ser el resultado final tras llevar a cabo todos los pasos en el ejemplo 
de uso del atributo TARGET para crear varias ventanas. 



Hemos puesto un color de fondo a ventana3. htmpara que resalte mas. 

La etiqueta BASE 

Cuando en el capltulo 2 aprendimos a crear enlaces vimos que habla dos formas de especificar la direccion de 
destino. La primera era poniendo la direccion relativa. Por ejemplo, desde un archivo llamado index.hum 
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situado en freek.futurnet.es [http://freek.futurnet.es] podrfamos enlazar una pagina llamada pag.htm y situada 
en el directorio varios usando el codigo: 


Una segunda forma para enlazar esta misma pagina era poniendo la direccion completa (URL) de Internet, 
siguiendo con el ejemplo anterior debemos usar el siguiente codigo: 


<A HREF="http://freek.futurnet.es/varios/pag.htm"> 


Comparando los dos ejemplos anteriores podemos deducir que cuando ponemos una direccion relativa el nave- 
gador le anade la direccion completa (exceptuando el nombre del archivo) de la pagina actual. Es decir, 
al usar en este caso la direccion relativa, el navegador ve que la pagina actual esta en freek.futurnet.es 
[http://freek.futurnet.es] y se lo anade a la direccion relativa para obtener una direccion absoluta. Esta direc¬ 
cion que es anadida a las direcciones relativas para obtener la direccion completa recibe el nombre de direccion 
base, y en todos los casos que hemos visto hasta ahora la direccion base coincidfa con la direccion de la pagina 
actual. 

Pues bien, la etiqueta BASE nos permitira cambiar esa direccion base, y ahora podremos elegir cualquier direccion 
del WWW como base para todos los enlaces con direcciones relativas de la pagina. Esta etiqueta debe ser usada en 
la cabecera del documento, entre <head> y </head>, dado que afectara a todo este. Para especificar la direccion 
se usara un atributo llamado HREF . Veamos un ejemplo, si queremos poner como direccion base de un documento 
HTML la direccion freek.jorgeferrer.com [http://freek.jorgeferrer.com] debemos escribir: 


<HEAD> 

...Mas codiqo. . . 

<BASE HREF="http://freek.jorgeferrer.com/"> 
</HEAD> 


O bien: 


<HEAD> 

...Mas codigo. . . 

BASE HREF="http://freek.jorgeferrer.com/index.htm" 
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</HEAD> 


En la figura 8.5 podemos ver la diferencia entre usar y no usar BASE y como afecta ello al significado de una 
direccion relativa. 

Figura 8.5. Variando la direccion de base con la etiqueta BASE variara el significado de 
las direcciones relativas. 


Pa gill a a ctiia L http: //www.towei c om. es/index.htm 

• No usando BASE 

<A HREF- 1c vano s/pag. htrrf >... </A> 

Direccion completa del enlace: 
www.towercom.es + varios/pag.htm= 
http i //www. to wercoiiL es/va rio s/p ag.htm 

• Usando <BASE HREF= “http://www.otro.es”> 

<A HREF- £ var io s/pag. htnf >...</A> 

Direccion completa del enlace 
:www. otro.es + vanos/pag.htm= 

http : //www. otro. e s/var io s/p a g.htm 


Aviso 

Las direcciones que pongamos como valor del atributo HREF de la etiqueta BASE deben ser siempre 
absolutas (completas). 

Es importante resaltar que aunque en todos los ejemplos que hemos puesto hasta ahora solo hemos considerado los 
enlaces hipertexto la direccion base afecta a todas aquellas etiquetas en las que debemos especificar una direccion 
y podemos hacerlo de forma relativa, como por ejemplo en las imagenes. Por ejemplo si usamos BASE como 
hemos indicado en el codigo anterior y posteriormente insertamos una imagen con el codigo: 


<IMG SRC="imagen.gif"> 


Esta imagen debe estar en freek.jorgeferrer.com/imagen.gif [http://freek.jorgeferrer.com/imagen.gif] y no en el 
mismo directorio que la pagina actual como sucedfa hasta ahora cuando no usabamos la etiqueta BASE. 
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Nota 

La etiqueta BASE existe desde la primera version del estandar HTML: el HTML 2.0. Sin embargo hemos 
preferido no comentarla hasta ahora porque, como enseguida veremos, es con los frames donde realmente 
su uso es importante, casi imprescindible. 

La pregunta que quiza nos hagamos ahora es /,para que puede servimos cambiar la direccion base?. Puede haber 
diversas causas, por ejemplo existe la posibilidad de que tengamos nuestra pagina principal en un servidor, pero el 
resto de las paginas y enlaces en otro o simplemente que esten todas en otro directorio. En ambos casos podemos 
ahorramos poner el otro servidor o directorio especificandolo como direccion base. 

Sin duda esta forma de usar la etiqueta BASE puede llegar a ser util, pero cuando se convierte en imprescindible es 
al usar un segundo atributo: TARGET. Hemos visto un poco antes que cuando trabajamos con paginas con varios 
frames se puede incluir el atributo TARGET en los enlaces para indicar el frame en el que debe mostrarse la pagina 
enlazada. Pues bien usando este mismo atributo en la etiqueta BASE lo que conseguimos es establecer el frame 
base donde se mostrara la pagina enlazada cuando pulsemos uno de los enlaces del frame actual. ^Porque es esto 
tan util? Lo entenderemos un poco mejor en cuanto empecemos a trabajar con frames, pero podemos adelantar un 
caso en el que su utilidad resulta obvia. En la figura 8.6 vemos un ejemplo simple pero que ilustra lo que queremos 
a la perfeccion: 
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Figura 8.6. En este Web pulsando sobre los enlaces del frame izquierdo nos movemos por 
los diferentes temas del frame derecho. 



La pagina contiene una serie de enlaces organizados por temas y esta dividida en dos frames. En el frame de la 
izquierda hay un listado de los diferentes temas y en el de la derecha los enlaces en sf. Pulsando sobre los temas 
del frame izquierdo se muestran los enlaces de ese tema en el frame derecho. En este caso es claro que todas las 
paginas a las que apuntan los enlaces deben ser mostradas en el frame derecho y por tanto lo mas comodo (y asf 
es como esta hecho en realidad) es usar (suponiendo que el nombre del frame derecho es derecho ): 


<BASE TARGET="derecho"> 


En el codigo del frame de la izquierda, con lo que nos ahorramos usar el atributo TARGET en cada uno de sus 
enlaces. 
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Ya hemos aprendido todo lo necesario para comenzar con la construction de paginas con frames, asf que sin perder 
mas tiempo pasamos ya a estudiar las etiquetas del lenguaje HTML que debemos usar. 

Creacion de paginas con frames 

El hecho de usar frames no solo cambia por completo la apariencia de nuestra pagina, sino que tambien cambia el 
proceso de su realization. Si hasta ahora los Webs estaban formados por un unico documento HTML donde estaba 
el contenido, al usar frames sera necesario un documento HTML para definir la estructura de la pagina (numero 
de frames a usar y disposition de estos), y posteriormente tantos documentos HTML extra como frames tengamos 
para insertar su contenido. En la figura 8.7 vemos un ejemplo con una pagina Web compuesta por 3 frames: 

Figura 8.7. Los Webs con frames constaran de varios documentos HTML. En este ejemplo 
al haber tres frames seran necesarios 4 documentos HTML. 


ler Documento HTML 
I Defimcion de k estructura I 


Contenido del frame 1 



En este caso seran necesarios 4 documentos HTML. El primero simplemente contiene el codigo que le indica al 
navegador el numero de frames de la pagina, su tamano, su position y el nombre de los archivos donde esta el 
contenido de los 3 frames, a este documento HTML le llamaremos documento de definicion de frames . Los otros 
3 documentos HTML tienen el contenido de cada uno de los tres frames y deben ser creados de la misma manera 
que hemos venido creando los documentos HTML hasta ahora, eso sf, hay que tener en cuenta que ese contenido 
sera mostrado en un espacio reducido (el del frame correspondiente) y no en toda la ventana del navegador. 

Creacion del documento de definicion de frames 

La estructura del documento de definicion de frames es parecida a la estructura de las paginas creadas hasta ahora. 
La principal diferencia sera que este documento no tendra contenido y por tanto no debe usarse la etiqueta BODY. 
A cambio ha de usarse una nueva etiqueta: FRAMESET. Esta sera la etiqueta clave en la creacion de los frames. 
La estructura basica del documento de definicion sera por tanto la que observamos en la figura 8.8: 
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Figura 8.8. La estructura de las paginas con frames es diferente a las que no tienen. La 
principal diferencia es la sustitucion de BODY por FRAMESET. 


ESTRUCTURA BASICA DE UN DOCUMENTO HTML 



<HTML> ! 

^_Docurriento 


<HEAD> 


Cabeceta 

</HEAD> 


Cuerpo 

<FRAMESET> 

</FRAMESET> 




</HTML> 


En ella se observa claramente como la etiqueta FRAMESET sustituye a BODY. Se podria decir que estas dos 
etiquetas son exclusivas, cuando este una no puede estar la otra. 

El siguiente paso en la creacion de nuestra pagina con frames sera decidir cuantos queremos crear como seran. 
Aunque posteriormente veremos como se pueden crear divisiones tan complejas como queramos, por ahora 
crearemos paginas en las que la ventana del navegador esta dividida en filas o en columnas. 

Division en columnas 

Para crear una pagina Web formada por varios frames que dividen la ventana del navegador en columnas usamos 
el atributo COLS de la etiqueta FRAMESET. Este atributo toma como valores separados por comas la anchura de 
los diferentes frames: 


<FRAMESET COLS="ancho_coll, anCho_co!2, 


Existen diversas formas de indicar el ancho de las columnas, una de ellas es usando porcentajes. Con este metodo 
podrfamos dividir la ventana en dos columnas usando el siguiente codigo: 


<HTML> 

<HEAD> 

</HEAD> 

<FRAMESET COI.S "2C%,80%”> 
</FRAMESET> 
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</HTML> 


En la que estamos diciendo que la primera columna (la de la izquierda) ocupara el 20% del ancho de la ventana 
del navegador y la segunda ocupara el 80% (ver figura 8.9). 

Figura 8.9. Como vemos la ventana del navegador ha quedado dividida en dos columnas 
con un ancho del 20% y del 80% del ancho total de la ventana. 



20 % 


Aviso 

Si el lector decide probar el ejemplo anterior probablemente no obtenga el resultado deseado en su 
navegador. Esto es as! porque por ahora solo hemos dicho que queremos que la ventana del navegador se 
divida en dos columnas pero para indicar que seran frames (lo cual es necesario para obtener el resultado 
de la figura 8.9) sera necesario anadir algo mas de codigo que veremos un poco mas adelante. 

Si quisieramos dividir la ventana en 5 columnas simplemente deberfamos especificar cinco valores separados por 
comas, por ejemplo: 


<FRAMESET COLS="10%,50%,15%,20%,5%"> 


” 272 ” 
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Por supuesto la suma de todos los porcentajes debe ser igual a 100. 

Nota 

El lenguaje HTML no fija ningun lfmite en el numero de filas, columnas o frames en general en que 
puede dividirse una pagina. Sin embargo no es recomendable crear mas de 4 frames en total, porque si 
no el espacio dedicado a cada uno de ellos sera muy pequeno. Debemos recordar que muchos de los 
navegantes veran nuestras paginas con un monitor de 14 pulgadas y una resolucion de 640x480. 

El metodo de especificar los tamanos de las columnas en porcentajes es sencillo de entender, sin embargo no 
siempre es util. Por ello existen otros metodos que es importante comentar. 

Uno de ellos consiste en especificar el ancho de las columnas en su tamano absoluto en pixeles directamente. Sin 
embargo existe un problema: existen varias resoluciones de pantalla distintas y serfa muy extrano que todos los 
navegantes que visiten nuestras paginas tengan una misma anchura de pantalla. Por esta razon no podemos saber 
cual sera el ancho total de la ventana del navegador y esto serfa imprescindible para poder indicar el ancho de 
las columnas en pixeles. Para solucionar este problema Netscape ™ invento el asterisco (*). Cuando se pone un 
asterisco como ancho de una columna estamos indicando al navegador que use todo el espacio sobrante para ese 
frame. Por ejemplo si escribimos: 


<FRAMESET C01.S ! " ICC, 3001; *”> 


se crearan tres columnas, la primera de 100 pixeles, la segunda de 300 y la tercera ocupara todo el espacio que 
reste y que dependera del tamano de la ventana del navegador con el que se visualicen las paginas. Si el navegante 
usa una configuracion de 640x480 es de esperar que la ventana de su navegador tenga un ancho entre 600 y 640 
pixeles y la tercera columna tendrfa una anchura de 200-240 pixeles. Si tiene una configuracion de 800x600 el 
ancho sera 760-800 pixeles y por tanto la tercera columna ocuparfa en este caso 360-400 pixeles de ancho. Esta 
es la resolucion que hemos usado para obtener la figura 8.8. 
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Figura 8.10. Las dos primeras columnas ocupan un ancho absolute de 100 y 300 pixeles. 
La tercera al haber usado el asterisco ocupara el resto, que en este ejemplo son 372 pixeles. 
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Estas son las dos configuraciones mas extendidas y las que por tanto debemos tener en cuenta. Si queremos cuidar 
mucho estos detalles debemos tener en cuenta las configuraciones de 1024x800 o mayores y el hecho de que los 
usuarios pueden cambiar el tamano de la ventana del navegador a su antojo. Sin embargo, por lo general, no es en 
absoluto necesario llegar hasta esos extremos de cuidado. 

El siguiente metodo para especificar el ancho de las columnas consiste en combinar todos los anteriores. La mejor 
forma de repasarlos es estudiando unos cuantos ejemplos. Para ellos vamos a suponer un navegador de 800 pixeles 
de ancho: 


1 . <frameset cols=" *,*">: Al usar dos veces el asterisco se divide el resto entre las dos columnas a partes 
iguales. Es decir, cada una ocupara la mitad de la ventana del navegador (unos 400 pixeles cada una). Este 
ejemplo es identico a usar < frameset COLS="50%, 50%">. 

2. <frameset cols=" 100, *, *"> : Divide la ventana en tres columnas. La primera de 100 pixeles y entre 
las otras dos divide a partes iguales el espacio sobrante (700 pixeles) con lo que (suponiendo el ancho total 
de 800 pixeles) cada una tendra un ancho de 350 pixeles. 
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Nota 

Algunos de estos ejemplos requieren algun tiempo de practica. En caso de tener alguna dificultad entendiendo 
alguno de ellos es mejor seguir practicando con frames usando los metodos algo menos complejos. Una vez 
hayamos adquirido mas practica trabajando con frames podremos volver sobre estos ejemplos y para practicar 
con ellos. 

3. <frameset cols="2 00,2*, *">: La primera columna ocupara un tamano absoluto de 200 pixeles. El 
resto (600 pixeles) es divido entre las dos siguientes columnas, pero ahora no sera a partes iguales, sino que 
la columna central debe ser el doble que la columna izquierda (este detalle se indica anteponiendo un 2 al 
asterisco). Por tanto del espacio sobrante, dos tercios (que equivalen a 400 pixeles en este caso), seran para 
la columna central y un tercio (200 pixeles) sera para la tercera. 

Si hubiesemos querido que una columna fuese el triple de la otra deberfamos haber usado el codigo 
COLS="200,3*, *". Y si quisieramos una relation 4:5 no tendnamos mas que escribir COLS="200,4*,5*". 

4. <frameset cols="1Q0, 50%, *">: La primera columna ocupa 100 pixeles, la segunda la mitad del ancho 
de la pantalla (400 pixeles) y la tercera el resto, que en este caso sera 300 pixeles. En la figura 8.11 podemos 
ver un ejemplo en el que se realiza esta division de columnas en un ordenador con configuration 800x600: 

Figura 8.11. En esta ocasion vemos un ejemplo del uso de FRAMESET combinando 
los distintos modos de indicar el tamano y el ancho resultante de cada uno para una 
ventana con 800 pixeles de ancho. 
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Nota 

Los tamanos absolutos deben usarse solo en ocasiones que realmente lo requieran y siempre que los 
utilicemos debe haber al menos una de las otras columnas con un tamano definido usando un asterisco (*). 


Division en filas 

Hasta ahora hemos aprendido a dividir la ventana en columnas, pero como es de esperar tambien se puede dividir 
en filas. En esta ocasion sera necesario usar el atributo ROWS (rows significa precisamente filas en ingles). El 
funcionamiento del atributo ROWS es muy similar al de COLS: 


<FRAMESET ROWS="altp_:fdlal, alto_fila2. 


Aviso 

Es importante hacer notar que cuando dividimos la ventana en filas y usamos tamanos relativos, estos se 
refieren al alto de la ventana, y no tienen en cuenta lo larga que puedan ser las paginas o si hay que usar 
las barras de desplazamiento o no para moverse por ella. 

En este caso es mas importante, si cabe, tener en cuenta que ni podemos saber el alto de la ventana del navegador 
de aquellos que visiten nuestras paginas. Por esta razon el uso de tamanos relativos o del asterisco (*) es aun mas 
usual. Veamos algunos ejemplos: 


1. <frameset rows="200, *, 1Q0">: Divide la ventana en tres filas: una superior de 200 pixeles en la que se 
podrta poner un encabezado; una inferior de 100 pixeles en la que puede ponerse una coletilla o una barra de 
navegacion; y una central que ocupa el espacio sobrante y donde se podrta situar el contenido principal. 

2. <frameset rows="15%, *, 3*">: Se divide la ventana en una primera fila que ocupa el 15% de la altura; 
la siguiente fila ocupara un cuarto del resto y la tercera tres cuartos. 

No son necesarios mas ejemplos para comprender el funcionamiento, ast que vamos ya a definir el contenido 
de cada una de las divisiones que hemos aprendido a crear. Cuando insertemos este contenido, la division se 
convertira en lo que realmente se llama frame. Mientras tanto esta estara sujeta a mas divisiones como veremos 
un poco mas adelante. 

Combinando COLS y ROWS 

Los atributos COLS y ROWS pueden ser usados simultaneamente en una misma etiqueta FRAMESET. Si hacemos 
esto dividiremos la ventana del navegador en cuadrtculas de diferentes tamanos. Podrtamos interpretar el resultado 
de usar ambos atributos simultaneamente como que cada una de las filas definidas por ROWS es subdividida en 
el numero de columnas que indica COLS. La pagina que mostramos en la figura 8.1 es una muestra del uso de 
COLS y ROWS simultaneamente. En ese caso el codigo usado fue: 


<FRAMESET 
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Tambien se pueden crear combinaciones mas complejas como por ejemplo: 


<FRAMESET COLS="100,50,*,*" 
ROWS="15%,*,3*"> 

. . . Mas codigo . . . 

:/FRAMESET> 


Que da lugar a la pagina de la figura 8.12: 


T7T 
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Figura 8.12. Es posible usar los atributos COLS y ROWS simultaneamente para dividir 
la ventana en varias bias y columnas. 
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La etiqueta FRAME 

La etiqueta usada para insertar el contenido en las filas, columnas o divisiones en general, hechas con la etiqueta 
FRAMESET, es FRAME. Esta etiqueta debe ser usada una vez por cada una de las divisiones que hallamos creado. 
Cada una de estas veces debemos usar un atributo, SRC, que servira para indicar el documento HTML donde se 
encuentre el contenido que queremos insertar en esa division: 


















Frames, las ventanas llegan al WWW 


<FRAME SRC=" docum. 


Esta etiqueta consta de una unica instruccion, es decir la instruccion de fin </frame> no existe, y debe ser 
insertada entre la instruccion de inicio y la instruccion de fin de la etiqueta FRAMESET. 

Otro de los atributos mas importantes de la etiqueta FRAME es NAME. Con este atributo le daremos un nombre al 
frame para poder referirnos posteriormente a el con el atributo TARGET o con los lenguajes de script. La forma 
de usar este atributo es: 


<FRAME SRC="docum.htm" 
NAME="primer_frame"> 


Si posteriormente queremos crear un enlace a este frame desde otro de la misma pagina no tendremos mas que 
escribir: 


<A HREF="otro.tlt;j#' 
TARGET="primer_frame"> 


Con los conocimientos adquiridos hasta ahora en este capitulo, junto con lo que ya sabemos, estamos en 
disposition de crear nuestra primera pagina completa con frames. 

Pagina completa con frames 

El primer paso sera crear el documento de definicion de frames. Abrimos nuestro editor y creamos un nuevo 
archivo. En este caso lo llamaremos index. htm y escribimos en el el siguiente codigo: 


<HTML> 


<HEAD> 

Primera pagina con frames 
</TITLS‘>: " 

</HEAD> 

<FRAMESET COLS="20%, 80%"> 
<FRAME SRC="izquierd.htm"> 
<FRAME SRC="derecha.htm"> 

</FRAMESET> 


~nw 


Vhtm&s- 
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Con esto tendremos una pagina que dividira la ventana del navegador en una columna izquierda y otra derecha 
que ocupan el 20% y el 80% del ancho respectivamente. El contenido de cada una de estas columnas estara en 
los archivos izquierda.htm y derecha.htm. El siguiente paso sera la creacion de estos archivos. Volvemos a 
abrir un archivo nuevo en nuestro editor y le llamamos izquierd.htm. En este archivo podemos escribir todo 
el codigo HTML que queramos siempre teniendo en cuenta sus limitadas dimensiones. Para empezar podemos 
escribir: 


<HEAD> 

</HEAD> 

<BODY BGCOLOR="# 9 9FF 9 9"> 

<H1> 

Frame izquierdo 

Este frame podria sefftfir de in-dice: 

<Ll>Tema 1 
<Ll>Tema 2 
<Ll>Tema 3 

</BODY> 


A continuacion abrimos otro archivo nuevo y le llamamos derecha.htm. El codigo a incluir en este tercer 
documento HTML sera: 


<HTML> 

<HEAD> 

</HEAD> 

<BODY> 

<H1> 

Este es el frame JDerecho 

<p> 

En este frame podria ir el contenido principal del Web. 
</BODY> 

</mm> 


El ultimo paso sera visualizar el documento de definicion de frames, index. htm, con el navegador que prefiramos. 
Por supuesto se podria ver cada uno de los documentos HTML por separado, y de hecho suele ser muy util hacerlo 
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mientras escribamos el codigo para ir comprobando que lo estamos haciendo bien, sin embargo una vez hemos 
terminado los documentos derecha.htm y izquierd.htm solo tienen significado como contenido de frames, 
y no como paginas Web individuales. Por esta razon el unico archivo que debe ser visto desde fuera debe ser el 
documento de definition de frames (en este caso llamado index.htm). Una vez abierto index.htm con nuestro 
navegador deberiamos ver una pagina similar a la que observamos en la figura 8.13. 

Figura 8.13. Ejemplo complete de una pagina con frames formado por un frame 
izquierdo pequeno que puede servir de indice y otro derecho con el contenido principal. 



La creation de paginas con frames es algo mas compleja que la creation de las paginas que hemos hecho hasta 
ahora, y por ello es comun cometer errores, sobre todo al principio. Si al intentar ver una pagina con frames no 
observamos el resultado obtenido es recomendable comprobar los siguientes detalles: 


1. Al igual que con el resto de paginas debemos asegurarnos de haber encerrado todo el codigo entre las 
instrucciones < html> y </html> y de que hemos guardado todos los archivos con termination .htm o 
.html. 
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2. Comprobar que los nombres de los archivos coinciden con los nombres indicados como valor del atributo 
SRC. En algunos casos es necesario que los nombres coincidan en mayusculas y minusculas. Este sera el 
caso si vamos a publicar nuestras paginas en un servidor UNIX (la mayorfa lo son). 

3. Es importante que nos aseguremos de no haber usado la etiqueta BODY en el archivo index.htm. Si lo 
hemos hecho debemos quitarla para que funcione nuestro ejemplo. 

4. Si hemos solucionado todos los problemas anteriores y la pagina sigue sin visualizarse correctamente 
probablemente estaremos usando un navegador que no soporte frames. 


Atributos de la etiqueta FRAME 

Ademas del atributo SRC y NAME, la etiqueta FRAME tiene otros que nos permitiran modificar algunas 
caracterfsticas de los frames. Todos los atributos que veremos a continuation han sido aceptados en el estandar 
HTML 4.0. 


1 SCROLLING : Usando este atributo podemos controlar la aparicion o no de barras de desplazamiento. Los 
valores que puede tomar este atributo son: 


• SCROLLING="auto": Este es el valor por defecto y provoca que el navegador solo inserte barras de 
desplazamiento si el contenido del frame ocupa mas del espacio dedicado para el. 

• SCROLLING="yes": Las barras de desplazamiento apareceran siempre. 

• SCROLLING="no": Las barras de desplazamiento no apareceran nunca. Hay que tener mucho cuidado 
si usamos esta option porque si la pagina ocupa mas que el espacio de la ventana dedicado al frame la 
information que no quepa en un principio no podra ser vista. 


1 NORESIZE: Por defecto los usuarios pueden mover los hordes de los frames sin mas que situar el raton sobre 
ellos y arrastrarlos. Si incluimos este atributo en la etiqueta FRAME evitaremos que el horde de ese frame 
pueda ser movido. Es necesario notar que este atributo no toma ningun valor. 

MARGINHEIGHT: Ajusta el margen superior que debe respetar el contenido de ese frame. El tamano debe 
ser dado en pixeles. 

1 MARGINWIDTH: Ajusta el margen lateral que debe respetar el contenido del frame. Al igual que antes, el 
margen debe ser dado en pixeles. 
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Para terminar vamos a ver un ejemplo del uso de todos ellos: 


<FRAMESET COES " ! 1 C, * " ROWS="110,*"> 


<FRAME NAME="Imagen" 


MARGINWIDTH=*0:* 
MARGINHE 
SCROLLING="No" 
FRAMEBORDER="No" 


<FRAME SRC="f2.htm" 


<FRAME SRC="rect.gif" SCROLLING="no"> 


<FRAME SRC="f4.htm" 
MARGINWIDTH="100" 
MARGINHEIGHT="100" 

</FRAMESET> 


que puede ser visto en la figura 8.14: 
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Figura 8.14. Usando los diferentes atributos de la etiqueta FRAME podemos tener un 
mayor control sobre las diferentes caracteristicas de los frames. 
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La imagen no cabe, pero no aparece 
la barra de desplazamiento 


Contenido del frame * 


Este es el contenido del frame 4. Como podemos 


observar este frame tiene amplios margenes como 


resultado del uso de MARGINWIDTEI y 
MAItGESTWIDTH en su defimcion. 


Mi PC 


En esta figura observamos, entre otras cosas, que aunque la figura rect.gif no cabe en el tercer frame (abajo 
izquierda) no aparecen las barras de desplazamiento. Otros aspectos interesantes estan comentados en rojo sobre 
la figura. 


Nota 


En general es muy util establecer unos margenes iguales a cero en los frames cuya funcion sea la de barra 
de navegacion. En los frames con contenido, especialmente si este es texto, se suele poner un margen de 
10 pixeles. 
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Compatibilidad: NOFRAME 

Hasta ahora hemos supuesto que los navegantes que vieran nuestras paginas con navegadores con soporte para 
frames, sin embargo <;que ocurre si las paginas son visualizadas con un navegador que no los soporte?. Este es 
un aspecto clave a considerar porque hoy por hoy los frames no forman parte del estandar y aunque Explorer™, 
Netscape™ y Opera™ los entienden hay muchos otros que no lo hacen. 

Afortunadamente los inventores de los frames tuvieron este aspecto en cuenta y crearon una nueva etiqueta, 
NOFRAME, pensada para este tipo de navegadores. Esta etiqueta debe ser usada entre <frameset> y 
< / frame s E T > de la siguiente manera: 


<FRAMESET . . .> 

. . .Codigo de definicion de frames. . . 
<NOFRAME> 


...Codigo alternative.. . 

</NOFRAME> 

</FRAMESET> 


Los navegadores que tengan soporte para frames simplemente ignoraran todo lo que haya entre la instruccion 
de inicio, <noframe >, y la instruccion de fin, </noframe> . Por su parte los navegadores que no entiendan 
frames, directamente ignoraran todas estas etiquetas (no las entienden) y pasaran a interpretar las etiquetas que 
siguen a <noframe >. Entre ellas debe estar la etiqueta BODY, ya que esta etiqueta era imprescindible para las 
paginas sin frames, y para los navegadores que no las soporten todas las paginas son sin frames. En esta ocasion 
BODY no provocara problemas con FRAMESET porque, como hemos dicho, los navegadores que entiendan esta 
ultima ignoraran todo el codigo entre <noframe> y < /noframe>. 

Un uso habitual de NOFRAME es: 


<FRAMESET C0LS="200,*"> 

<FRAME SRC="fl,htm"> 

<FRAME SRC="f2.htm"> 

<NOFRAME> 

<BODY> 

<p>Esta pagina usa frames y su 
navegador no los soporta, por favor vaya a 
<A BREEDS in frame . htm"> 

TOiteSfcras paginas sijS frames 

</A> 

</BODY> 

</NOFRAME> 

</FRAMESET< 


Si no hubieramos usado la etiqueta NOFRAME el resultado de ver la pagina con este codigo con un navegador 
sin soporte para frames serfa simplemente una pantalla en bianco como la que vemos en la figura 8.15: 
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Figura 8.15. El navegador NCSA Mosaic™ no soporta frames, con lo que los usuarios de 
dicho navegador no veran nada si no usamos la etiqueta NOFRAME. 



usandola se obtendra el resultado mucho mas explicativo de la figura 8.16. 
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Figura 8.16. En este caso si hemos usado NOFRAMES ofreciendo al navegante un enlace 
para ver una version sin frames de las paginas. 



Anidamiento de framesets 

Hasta ahora hemos aprendido a dividir la ventana del navegador en dos o mas filas con el atributo row, sin embargo 
las posibilidades del lenguaje HTML no acaban ahf. 

Tanto a lo largo de este capftulo, como en el capftulo anterior hemos ido viendo algunos ejemplos de frames 
(figuras 7.1, 7.6 y 8.2) que presentaban paginas Web que dividfan la pantalla del navegador de una forma mas 
compleja que simplemente dividir en filas o columnas. ^Como lo hacen? La respuesta es simple, anidando 
framesets. En la figura 8.17 podemos ver una explication grafica de lo que esto significa. Vamos a explicarla 
paso a paso. 


TXT 
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Figura 8.17. Para conseguir estructuras de frames mas complejas puede anidarse la 
etiqueta FRAMESET. En esta figura se indica como hacerlo. 
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Division 

■200, *"> 


CFRAME3ET COL3 = V "200, *"> 

<FRAME SRC =^tr ame1.htm"> 
< F RAME S RC = v " i r ame 2 . htm"> 
</FRAMESET> 


FRAMESETS ANIDADOS 
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<FRAME SRC f rame 1. htm"> -—__ 


Contenido de la l a division 

<FRAME3ET ROMS = v '100, *"> 

<F RAME S RC= Vv f u ame2 1. htm" > 

<F RAME 3 RC = v " f u aitie2 2 . htm" > 
</FRAMESET> 
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</ FRAMESET> 


RESULTADO: 
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Empezamos con el siguiente codigo: 


<frameset cols="150,*"> 
. . . mas codigo . . . 
<frameset> 


Con el estamos dividiendo la ventana del navegador en dos columnas. Como hemos visto un poco antes en 
este capftulo podemos insertar contenido en cada una de las divisiones creadas usando la etiqueta FRAME, por 
ejemplo: 


<frameset cols="150,*"> 
i^jjlame src-^framel .htm"/> 
<frame src="frame2,htm"/> 
<fra.T.ese:.> 


Pero existe otra posibilidad. En vez de usar la etiqueta FRAME para insertar contenido en la segunda de las 
divisiones podemos volver a usar la etiqueta frameset (anidandola dentro de la anterior aparicion de esta misma 
etiqueta) para subdividir la parte derecha en dos, es decir: 


<frsfS6.set cais="i50, *"> 
<frame src="framel.htm"/: 
<frame.set rows="100, *"> 

. . . Mas codigo . . . 

</frameset> 

</frameset> 


Ahora tendremos una pagina Web formada por tres frames. El primero esta situado a la izquierda de la pantalla 
y tendra 200 pixeles de ancho. Los otros dos ocupan el espacio sobrante. Uno ocupa los 100 pixeles superiores 
y el otro el resto. Por supuesto, al haber dos frames mas, debemos volver a usar la etiqueta frame para insertar 
contenido en ellos. El codigo total quedarfa por tanto. 


<frameset cols="150,*"> 

<f ra.~.e src-"'£ramel ,htm"/> 
<frameset rows="100,*" > 

<fra.r.e sre~"frame21,htm"/> 
<f.rame src»"frame22 ,htm"/> 
</frameset> 

</frameset> 


w 
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Sugerencia 

No existe ningun limite en el numero de niveles de anidamiento de la etiqueta frameset que pueden 
usarse. La unica limitacion que debemos tener en cuenta es el tamano y resolution de pantalla que 
usaran los navegantes para ver nuestras paginas. Si usamos muchos anidamientos los frames seran muy 
pequenos y se podra ver poca information en cada uno de ellos, con lo que se hare necesario usar las 
molestas barras de desplazamiento. 

El hecho de haber elegido esta estructura de tres frames para el ejemplo no es casualidad. Como hemos visto 
en las captures de paginas reales mostradas hasta ahora, es una de las mas usadas. El frame izquierdo puede 
usarse como indice y el superior como un espacio para incluir un banner o encabezado grafico. Estos dos frames 
pueden mantener su contenido constante mientras en el tercero y mas grande de los frames se presenta el contenido 
principal de la pagina y es sobre el que se va navegando. 

Para tener la pagina Web completa solo nos quedaria crear los archivos extra/ejeml8/framel.htm, 
extra/ejeiftI8/frame21,h:tm y extra/e jeml8/frame22 . htm. Nosotros hemos creado unos de ejemplo, 
incluyendo un encabezado grafico para el frame superior y hemos obtenido el resultado que vemos en la fig8-18. 

Figura 8.18. Nuestra primera pagina con frames. La ventana esta dividida en 3 apartados 
(los frames) el izquierdo es el indice, el superior el titulo y el central el que tiene el 
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contenido. 
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Todos los aspectos relacionados con los frames que hemos visto hasta ahora son iguales para todos los navegadores 
y han sido adoptados en el estandar HTML 4.0. Esto quiere decir que son entendidos por los navegadores 
Microsoft Internet Explorer 3.0 o posterior, Netscape Navigator 2.0 o posterior, Opera 3.0 o posterior y los 
navegadores graficos que aparezcan de ahora en adelante con soporte completo de HTML 4.0. 
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Debemos recordar que los frames fueron una invention de Netscape y posteriormente Explorer y otros lo 
adoptaron. Sin embargo tambien cambiaron algunas caracteristicas. Por esta razon en los atributos y etiquetas 
que veamos a partir de ahora haremos mention explicita de que diferencias existen entre la interpretation del 
codigo de los frames por parte de Netscape y Explorer, y lo indicaremos cuando alguna etiqueta, atributo o valor 
determinado haya sido adoptado por el estandar HTML 4.0. 

Bordes de los frames 

Cuando creamos paginas con frames estos aparecen divididos por unas lineas horizontales y verticales (ver 8-19) 
que ademas el usuario que vea nuestra pagina podra mover a su antojo (a no ser que usemos el atributo noresi ze). 

Figura 8.19. En general los navegadores dibujan lineas con aspecto 3-D para separar los 
frames. 
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Desde la aparicion de los frames los programadores de paginas Web han estado reclamando un mayor control 
sobre la disposition sobre estos bordes y con la aparicion de Netscape 3.0 e Internet Explorer 3.0 se introdujeron 
nuevos metodos para definir sus caracteristicas. 

Estos metodos no son mas que la inclusion de tres nuevos atributos para las etiquetas frame y frameset. Estos 
son bordercolor y frameborder para frame y border para frameset. Aprendamos a usarlos uno por uno. 
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Cambiando el color del borde 

El primero de los atributos, bordercolor, nos permitira cambiar el color del borde. El color puede indicarse tanto 
con el numero hexadecimal RGB (por ejemplo #99CC99) o bien usando uno de los nombres predeterminados que 
vimos en el capftulo 5. Por ejemplo para poner el borde de color rojo podnamos usar: 

<FRAME BORDERCOLOR="red"> 

O bien: 

<FRAME BORDERCOLOR="#FFQOOO"> 


Dado que los hordes son compartidos por varios frames, en el caso de que cada uno de los hordes indique un color 
diferente el resultado es impredecible y depende del navegador. Por esta razon no podemos fiarnos de que si se da 
esta situacion lo que nosotros con nuestro navegador sera lo mismo que vean los navegantes y por tanto debemos 
evitarla en lo posible. 

Si en cada uno de los frames de las paginas creadas en la seccion anterior usamos este atributo para indicar hordes 
rojos obtendremos el resultado de la figura 8.20. El codigo usado es: 


C'RAKKSET COI.S bO, *"> 

<FRAME SRC="framel.htm" BORDERCOLOR="#FFQQOO"> 
<FRAMESET ROWS="100,*"> 

<FRAME SRC="frame21.htm" BORDERCOLOR="#FFOOOO"> 
<FRAME SRC="frame22.htm" BORDERCOLOR="#FFOOOO"> 
</FRAMESET> 

</FRAMESE!> 
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Figura 170. Con el atributo bordercolor podemos elegir el color que queramos para los 
bordes de los frames. 
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Hay que admitir que el cambio en la apariencia de la pagina no es muy importante, sin embargo puede ser muy 
util en ciertos Webs en los que los colores estan muy cuidados. 
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El navegador Netscape permite tambien usar el atributo bordercolor en la etiqueta frameset, en este caso el 
valor que demos a este atributo afectara a todos los frames dentro de ese frameset. De esta manera podrfamos 
habernos evitado escribir bordercolor="#ff0000" tres veces en el ejemplo anterior. Sin embargo debemos 
tener en cuenta que esta posibilidad solo la ofrece Netscape Navigator y no Explorer ni otro navegador. Ademas 
tampoco ha sido aceptada por el estandar HTML 4.0. 

Como quitar el borde 

Muchos disenadores de Webs que habian sido detractores de los frames cambiaron su opinion sobre ellos una vez 
se ofrecio la posibilidad de quitar los hordes de estos. De esta forma se puede crear la ilusion de que existe un solo 
frame (o una pagina sin frames), mientras aprovechamos las posibilidades para mantener siempre visibles ciertas 
partes de la pagina. 

La etiqueta frame tiene un atributo que puede ser usado para quitar los hordes de los frames: frameborder. 
Este atributo puede tomar dos valores: "1" y "0" que significan mostrar los hordes y ocultarlos respectivamente. 
El valor por defecto es mostrar los hordes (frameborder="1") y si queremos que estos desaparezcan debemos 
escribir explfcitamente: 

<FRAME FRAMEBORDER="0"> 


Al igual que antes se pueden producir conflictos si un borde es compartido por dos frames uno de los cuales 
indica frameborder= " 0" y el otro frameborder= " l". La decision que tome el navegador en esta situation es 
impredecible y por tanto debe ser evitada en la medida de lo posible. 

Aunque no ha sido aceptado por el estandar HTML 4.0, es importante hacer notar que tanto Netscape como 
Explorer admiten el uso del atributo frameborder en la etiqueta frameset. De esta forma podemos conseguir 
quitar todos los hordes de una vez poniendo frameborder="0" en la primera etiqueta frameset en lugar de 
repetirla para cada uno de las apariciones de frame. 

Atencion 

El atributo frameborder surgio como extension al estandar de HTML. Inicialmente los valores validos 
eran yes y no. Sin embargo HTML 4.0 introdujo el soporte de frames en el estandar y los valores 
aceptados de frameborder son l y 0. La conclusion es que aunque en las paginas existentes podamos 
encontrarnos cualquier combination de los valores anteriores, en las paginas nuevas deberfamos usar solo 
los valores numericos estandar. 


" 295 " 
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Figura 171. Usando frameborder="0" ocultamos los bordes de los frames con lo que se 
consigue una gran mejora en la apariencia. 
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En la mayorfa de las ocasiones quitando el borde de los frames se consigue una apariencia muy mejorada de 
nuestras paginas. Para conseguir este efecto en las paginas creadas en el ejemplo anterior solo tenemos que 
cambiar ligeramente el codigo para incluir el atributo frameborder= " 0 


<FRAMESET COLS="150,*"> 

<FRAME SRC="framel.htm" FRAMEBORDER="0"> 
<FRAMESET ROWS="100,*"> 

<FRAME SRC="frame21.htm" FRAMEBORDER="0"> 
<FRAME SRC="frame22.htm" FRAMEBORDER="0"> 
</FRAMESET> 



















Frames, las ventanas llegan al WWW 


</FRAMESET> 

Con este codigo obtendriamos el resultado de la figura 8.21 en la que no se distinguen los hordes de los frames 
y por lo tanto no se pueden redimensionar. Sin embargo si hacemos la ventana del navegador mas pequena 
apareceran en cada uno de los frames unas barras de desplazamiento que delataran su presencia, como vemos en 
la figura 8.22. 

Figura 8.22. Aun usando el atributo frameborder si hacemos la ventana del navegador 
pequena apareceran barras de desplazamiento en cada uno de los frames. 



Grosor del borde 

Una de las ultimas extensiones de Netscape Navigator relacionadas con los frames es el atributo BORDER. Con 
el podemos indicar el grosor del borde que separa los frames asignandole un valor en pixeles. La forma de usar 
este atributo es: 


<FRAMEBORDER BORDER="TamanoBordeEnPixeles"> 
</FRAMEBORDER> 


Si existen varias etiquetas frameborder en una misma pagina (es decir si las hemos anidado) podemos usar el 
atributo border en cualquiera de ellas, pero es conveniente usarla una unica vez. Vamos a usarla con nuestro 
ejemplo para crear un borde grueso entre las dos divisiones del segundo de los framesets. Para ello usamos el 
codigo: 


W 
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<FRAMESET COLS="150,*"> 

<FRAME SRC="framel.htm"> 

<FRAMESET ROWS="100,*" BORDER="20"> 
<FRAME SRC="frame21.htm"> 

<FRAME SRC="frame22,htm"> 

</FRAMESET> 

</FRAMESET> 

Con lo que obtenemos el resultado de la figura 8.23. 
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Figura 8.23. Con el atributo border podemos cambiar el grosor de los bordes. En este 
caso el borde horizontal tiene un grosor de 20 pixeles. 



Valores especiales del atributo target 
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Ya conocemos todo lo que necesitamos sobre los frames, pero antes de empezar la siguiente practica es importante 
conocer una serie de valores de target con significado especial. 

Como hemos visto, el atributo target nos permite mostrar el resultado de un enlace en el frame que queramos 
indicando el nombre de dicho frame. Existen, ademas, ciertos valores que puede tomar este atributo que tienen un 
significado especial: 


TARGET="_blank" 

TARGET="_self 


TARGET="_parent" 


Fuerza que el documento referenciado por el enlace sea mostrado en una nueva 
ventana del navegador. 

Usando este valor el documento enlazado sera mostrado en el mismo frame o 
ventana donde esta el enlace. Este valor es especialmente util cuando se ha usado la 
etiqueta base para especificar un frame destino por defecto distinto del actual. 

Este valor provoca que el documento sea mostrado en el frameset padre del frame 
actual. 


TARGET="_top" Fuerza a que el enlace sea mostrado usando todo el espacio de la ventana del 

navegador destruyendo toda estructura deframes. Este valor debe ser usado siempre 
que creemos un enlace a una pagina externa a nuestro sitio web. 


En la figura 8.24 podemos ver una representacion del significado de cada uno de estos valores que nos ayudara 
resolver las dudas que tengamos sobre ellos. 
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Figura 8.24. Representation de los cuatro valores especiales del atributo target: _seif, 
_parent, _topy _blank. 



Ejercicio con target 

A continuacion es aconsejable realizar algunas practicas para habituarse al uso de estos valores. Cree una pagina 
sencilla de prueba: 


<HTML> 

<HEADX/HEAD> 

<BODY> 

<Hl>Pagina de prueba</Hl> 
</BODY> 

</HTML> 


Guardela con el nombre prueba.htm. A continuacion usaremos el ejemplo de pagina con 3 frames creado 
anteriormente. Apartir del archivo extra/e jaml8/frame22 .htm> [extra/ejeml8/frame22.htm] edftelo, incluya 
el siguiente codigo en el y guardelo en el mismo directorio que prueba .htm: 


<A HREF="prueba.htm" TARGET="_se1f"> 
Enlace a la pagina de prueba 
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</A> 


Para comprobar el efecto que se ha conseguido hay que abrir con el navegador la pagina index. htm, que era la 
que contenfa los framesets y pulsar sobre el enlace. La pagina de prueba sustituira al frame donde estaba el enlace. 

A continuacion editamos de nuevo el archivo sustituyendo TARGET="_self" por TARGET="_parent" y volve- 
mos a probar el enlace en el navegador. Seguidamente probamos los otros dos valores especiales. Este es un buen 
momenta tambien para practicar usando los nombres de los frames como valor del atributo xargex. 

Practica 5: Web de Los Alpes con frames 

El objetivo de nuestra quinta practica consistira en realizar una version con frames del sitio Web de la agenda de 
viajes Los Alpes que creamos en la practica 4 (figura 8.25). Como es nuestro primer gran proyecto con frames 
nos limitaremos a la division de la ventana del navegador en dos frames fila evitando asf las dificultades del 
anidamiento de frames. Nuestra recomendacion para el lector avanzado es que realice la practica tal y como aqui 
se expone y una vez completada con exito intente mejorarla introduciendo un tercer frame. Este tercer frame 
puede servir por ejemplo para mantener siempre visible los botones de las paginas mes.htm y medida.htm. Para 
ello aconsejamos crear una division en dos columnas reservando la izquierda para los botones y usando la derecha 
para mostrar el contenido principal. 
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Figura 175. Pagina Web de Los Alpes creada en la practica 4 de este curso. Ahora la 
modificaremos para crear una version con frames. 
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Documento de definicion de frames 

Volvamos a la version de dos frames. El frame superior (banner) lo usaremos para mantener siempre visible 
el logo de Los Alpes junto con los botones que nos llevan a las distintas secciones de la pagina. En el frame 
inferior (principal) iremos mostrando cada una de las paginas de las que se compone el sitio Web. Estas deberan 
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ser modificadas ya que el logo y los botones ya no deben mostrarse. En su momento veremos que cambios son 
necesarios. Por ahora empezaremos con el documento de definicion de frames. Este sera ahora el archivo inicial 
de nuestro sitio Web por lo que debe llamarse index.htm. El documento HTML con el contenido principal debera 
ser renombrado. En esta ocasion hemos elegido darle el nombre main. hfpp 

Debemos dividir la ventana en dos bias. La fila superior debe tener una altura minima de 163 pixeles para que 
quepan las imagenes que queremos incluir. La fila inferior ocupara el resto del espacio. El codigo que define esta 
estructura es por tanto: 


<FRAMESET ROWS="163,*"> 
. . . contenido frames . . . 
</FRAMESET> 


Que nos divide la ventana en dos tal y como vemos en la figura 8.26. 


"TUT" 
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Figura 176. El frame superior sera de 163 pixeles, mientras que el inferior ocupara el 
resto del espacio de la ventana del navegador. 
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El contenido del primero de los frames sera el archivo banner.htm. El contenido del segundo sera el archivo 

main. htm. 

Ademas de insertar el contenido de los frames debemos incluir un codigo alternativo para los navegadores que no 
soporten frames en el que mostraremos un texto acompanado de un enlace a una version de las paginas sin frames. 

Para crear esta segunda version creamos un directorio de nombre noframes y copiamos a el todos los documentos 
de la practica 4. Con todo esto el codigo completo queda: 
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<HTML> 

<HEAD> 

<TITLE>Agencia de viajes LOS ALPES</TITLE> 

</HEAD> 

<FRAMESET ROWS="163, *"> 

<FRAME SRC="banner.htm" NAME="banner" MARGINWIDHT="0" 
MARGINHEIGHT="0'"> 

<FRAME SRC="main.||*i" NAME="p®±nc:ipal"> 

</FRAMESET> 

<NOFRAMES> 

<BODY> 

Esta pagina tiene frames y su navegador no los 

soporta. Por favofe,. visite hlMSSbras paginas especialmente 

preparadas para navegadores 

<A HREF="noframes/index.htm">sin frames</A>. 

</BODY> 

</NOFRAMES> 

</HTML> 


Un aspecto que es necesario comentar de este codigo es que hemos usado los atributos marginwidth y 
marginheight dandoles el valor cero en el frame superior. Esta es una practica muy habitual en los frames 
que contengan imagenes ya al eliminar los margenes podremos reducir el tamano del frame. 

Sugerencia 

En un capftulo anterior aprendimos a usar la etiqueta meta, para cargar automaticamente otra pagina (o 
refrescar la misma) pasados unos segundos. Para ello debfamos incluir en la cabecera del documento 
HTML el siguiente codigo: 


<META HTTP-EQUIV="refresh" C0NTENT="5;URL=otrapagina.htm"> 

Podemos usar esta tecnica para redirigir a los usuarios de navegadores sin soporte para frames a otras 
paginas que no los tengan pasados 5 segundos. 

El frame Banner 

El contenido de este frame debe estar en un archivo que hemos decidido llamar banner.htm, y el siguiente paso 
en nuestro proyecto sera escribir su codigo. Para ello no tenemos mas que copiar las primeras lrneas del archivo 
mes.htm (en realidad vale cualquiera menos main.htm). En estas primeras lrneas se inclufa el codigo para insertar 
el logo de Los Alpes y los botones que nos dirigfan a las distintas secciones del sitio Web. Nuestro objetivo sera 
que todo ello sea mostrado en este frame para que permanezca siempre visible y se muestre como en la figura 8.27 
independientemente del contenido del frame inferior. 
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Figura 177. El contenido de banner.htm, el logo y encabezado de Los Alpes asi como los 
botones de navegacion, seran mostrados en el frame superior. 



Este es el momento de tener en cuenta un detalle importante de la creation de toda pagina con frames. En 
este documento hay una serie de enlaces (los botones) y debemos elegir cual sera el destino donde se mostrara 
las paginas a las que nos conducen dichos enlaces. Si no especificamos ningun destino cuando pulsemos, por 
ejemplo, sobre el boton OFERTAS, el documento mes.htm sustituira a banner. htm en el frame superior. Esto 
no es lo que queremos ya que precisamente el objetivo de este frame era mantenerse siempre visible. Queda claro 
por tanto que el mes.htm debe mostrarse en el frame principal. Ya sabemos como hacerlo, no hay mas que usar el 
atributo target en la etiqueta que definia el enlace: 


<A HREF="mes.htm" TARGET="principal"> 

<IMG SRC="img/boton2.jpg" WIDTH=136 HEIGHT=48 
BORDER=0 ALT="Gfertas del Mes"> 


w 
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</A> 


El siguiente paso serfa afiadir el atributo TARGET en el resto de enlaces de banner.htm ya que todos ellos deben 
mostrar el resultado en el frame principal (figura 8.28). Sin embargo, si recordamos, en estos casos podfamos 
usar la etiqueta base en la cabecera del documento para indicar cual es el frame destino de todos los enlaces del 
documento. El codigo que debe emplearse es: 


<BASE TARGET=pirincipal"> 


Figura 178. Todos los botones tienen como destino el frame principal. Por tanto es 
conveniente usar la etiqueta base con el atributo TARGET=principal. 



IDS' 
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Es importante recordar que la etiqueta base debfa incluirse en la cabecera del documento, entre las instrucciones 

«HEAD» y </</HEAD». 

El codigo completo del archivo banner. htm es: 


<HTML> 

<HEAD> 

<TITLE>LOS ALPES - Encabezado</TITLE> 

<BASE TARGET="principal"> 

</HEAD> 

<BODY LINK="#FED354" VLINK="#EDB301" ALINK="#FFFF00" 
BGCOLOR= "#335 lii'*' TEXT=" # 71 AC 8 4 " 

BACKGROUND="img/tratilea.jpg"> 

<A NAME="arriba"x/A> 

<CENTER> 

<TABLE ALIGN="center" border="0"> 

<TR> 

<TDXIMG SRC="img/logo.gif" WIDTH=90 HEIGHT*=99 BORDER=0 
ALT="[LOGO]"></TD> 

CTDXIMG SRC' 5 " img/losalpes .gif" WIDTH=44& 

HEIGHT=99 BORDER=0 ALT--"T,OS ALPES - Agenda de 
Viajes"x/TD> 

</TR> 

<TR> 

<TD COLSPAN="2"> 

<A HREF="main.htm"xIMG SRC~"img/bctcnO . ;pq" 

WIDTH=llft atelGHT=48 BORDER=0 ALT="Pagina 
principal "x/A> 

<A HREF="medida.htm"><IMG SRC="img/botonl.jpg" 
WIDTH=136 HEIGHT=48 BORDER=0 ALT="Viajes a su 
med i da " x/A> 

<A HREF="mes .hfcss&XIMG SRC="img/boton2 . jpg" 

WIDTH=136 HEIGHT=48 BORDER=0 ALT= h Ofertas del Mes"X/A> 
<A HREF="superefe .htm"XIMG SRC="img/boton3 . jpg" 
WIDTH=136 LETGUT-48 BORDER=0 ALT="La 
superOFERTA"X/AX/T&> 

</TD> 

</TR> 

</TABLE> 

</CENTER> 

</BODY> 

</HTML> 


Frame principal 

El frame inferior sera nuestro frame principal, su contenido ira cambiando cuando el visitante navegue por nuestras 
paginas, mientras que el frame con el banner se mantendra siempre igual. Este contenido sera el de los documentos 
mes. htm, superof e. htm, medida. htm y main. htm. La manera de pasar de unos a otros sera pulsar sobre los 
botones del frame banner. 

Estas paginas ya existen y estan creadas, sin embargo todas ellas contienen una cabecera con el tftulo y la 
navegacion. Estos elementos ya no son necesarios, dado que se encuentran en el frame superior. Por ello sera 
necesario editar los archivos y quitar esa parte de cada uno. En la figura 8.29 se muestra el documento mes. htm 
una vez se le ha quitado la cabecera. 
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Figura 179. Pagina sin cabecera, lista para ser insertada en un frame. 



Ultimos retoques 

El ultimo paso en la creation del sitio Web de los Alpes en su version con frames consistira en dar los ultimos 
retoques. Suele ser aconsejable asegurarnos que todo lo anterior funciona antes de realizarlos. 

Los retoques abarcan redimensionar los tamanos de los frames para adaptarlo al contenido final que se ha incluido 
en ellos, cambiar el fondo de algunos de ellos para que contrasten mejor, incluir margenes para los parrafos, 
eliminar los hordes, etc. Nosotros nos centraremos en estas dos ultimas modificaciones. 
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Para eliminar el borde debemos editar de nuevo el archivo index.htm e incluir los atributos necesarios para 
hacer los bordes invisibles. En un principio, y para cumplir el estandar incluimos frameborder=" 0 " en las dos 
etiquetas frame que tenia el documento. Posteriormente, para asegurar compatibilidad con todos los navegadores 
incluimos ademas: frameborder="0", border=" 0" y framespacing="0" en la etiqueta frameset. 

Por otro lado editaremos el archivo main.htm que contenia el texto de bienvenida al sitio Web y daremos formato 
a dicho parrafo incluyendo margenes a la izquierda y a la derecha suyo. Para crear los margenes usaremos la 
tecnica comentada en el capitulo dedicado a las tablas. Crearemos una de tres columnas. La izquierda estara 
vacia (contendra un espacio vacio, &nbsp;) y constituira un margen con un ancho igual al 10% de la pantalla. 
La columna derecha, igualmente vacia, tendra un ancho del 5% y constituye el margen derecho. En la columna 
central ira, por supuesto el texto, y ocupara el resto del espacio. 

La practica ha terminado. El resultado final se distribuye junto con este curso en un archivo comprimido: 
practica5. tgz [extra/practica5.tgz], El resultado final se puede apreciar en la figura 8.30. 
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Figura 180. Estructura de frames mostrando la pagina main. htm en el frame central. 



Frames flotantes 


Los frames flotantes son muy parecidos a los que hemos visto hasta ahora, siendo su principal diferencia que 
pueden ser insertados en cualquier lugar de una pagina web, y su funcion ya no sera dividir la ventana del 
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navegador en varias partes, sino insertar en medio de un documento HTML el contenido de otro en un area 
del tamano que indiquemos. 

Nota 

Los frames flotantes fueron originalmente una extension de Internet Explorer™ que posteriormente paso 
a formar parte de el estandar HTML 4.0. Casi todos los navegadores usados actualmente lo soportan con 
la exception de Netscape Navigator 4.x™. 

Para crear frames flotantes debemos usar la etiqueta iframe que significa Inline Frame por su similitud con 
las imagenes inline que se insertan en cualquier lugar de la pagina con la etiqueta img. La etiqueta iframe es 
un contenedor, esto es, esta formada por una instruccion de inicio, <<iframe», donde se especifican todos 
las caracterfsticas del frame por medio de atributos, y una instruccion de fin, </</iframe». Entre estas dos 
instrucciones se puede incluir codigo alternative para aquellos navegadores que no soporten los frames flotantes. 
Los que si lo hagan ignoraran dicho codigo. Dicho esto ya podemos escribir el codigo (de manera general) 
necesario para insertar un frame flotante: 

<IFRAME . . .> 

. . .Codigo alternative. . . 

</IFRAME> 


Este codigo puede ser insertado en cualquier parte del cuerpo de una pagina. Esto quiere decir que para insertar un 
frame flotante no es necesaria ser una pagina especial para poder insertar frames. Tambien es importante destacar 
que podemos insertar tantos frames flotantes como queramos. 

Atributos de los frames flotantes 

En el codigo anterior incluimos tres puntos suspensivos en el interior de la instruction <FRAME>, estos 
representan los atributos que debemos usar para indicar el documento HTML donde se encuentra el contenido 
que queremos insertar en el frame flotante, el tamano de este, el alineamiento y otras caracterfsticas variadas. 

El atributo SRC es de uso obligatorio y toma como valor la direction URL, absoluta o relativa, del documento 
HTML que servira como contenido. Conocido este atributo ya podemos escribir un primer ejemplo de una pagina 
web con un frame flotante: 


<HTML> 

<HEAD> 

<TITLE>Frames g^t»Jtte</TITLE> 

</HEAD> 

<BODY> 

<H2>A continuacion vemos un ejemplo de un 
frame flotante:</H2> 

CIFRAME SRC="doc.htm"> 

iu r-.aveqador no soporta frames flotantes, para ver 
el jSdrfteanido ve a <A HREF="doc. htm">doc. htm</A> 

</IFRAME> 

</BODY> 


:/HXML> 
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A continuation guardamos este archivo con el nombre iframe.htm, por ejemplo, y creamos el archivo doc.htm 
con un codigo HTML sencillo (nosotros hemos incluido un poco de texto, una imagen y un fondo azul) y 
visualizamos iframe.htm con Explorer obtendremos el resultado de la figura 8.31. 

Figura 181. Los frames flotantes nos permiten insertar un documento HTML completo 
en una pagina Web. 



A continuation vemos un ejemplo de un frame 
flotante: 




Unas barras de desplazamiento delatan la presencia de un frame. Un aspecto a destacar de esta figura es que 
Explorer asigna un tamano por defecto a dicho frame en el que mostrara todo el contenido del documento HTML 
que le hayamos indicado independientemente de lo largo que este sea. 

Si esta misma pagina es visualizada por un navegador sin soporte para frames flotantes, por ejemplo Netscape 
Navigator 4.0, se mostrarfa el codigo que hemos introducido entre la instruccion de initio y la de fin, como vemos 
en la figura 8.32. 
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Figura 182. Los navegadores que no soporten frames flotantes mostraran el codigo 
altemativo incluido entre las instrucciones «iframe» y </</iframe» 



Ademas del atributo SRC la etiqueta iframe tiene los siguientes: 

name Este atributo nos permitira asignarle un nombre al frame de manera que podamos 

referimos a el por ejemplo para usarle como destino de un enlace usando el atributo 

TARGET. 

WIDTH y heigth En la figura 8.30 hemos visto que Internet Explorer asignaba un tamano por defecto 

al frame flotante. Usando estos dos atributos podremos indicar la anchura y altura 
respectivamente que no queramos. El valor dado sera interpretado como un numero 
en pixeles. Si en el codigo usado para obtener dicha figura anadimos un tamano lo 
suficientemente grande desaparecera la barra de desplazamiento. 

frameborder Este atributo funciona de igual manera que en los frames normales: sirve para 

quitar y poner los bordes. Escribiendo framborder="0" en el ejemplo realizado 
anteriormente obtenemos el resultado de la figura 8.33, en la que vemos que el borde 
del frame ha desaparecido. Sin embargo no hemos ampliado el tamano del frame 
con los atributos width y HEIGHT con lo que el documento es mas grande que el 
espacio asignado y la barra de desplazamiento sigue ahf. 

SCROLLING Este atributo nos permitira quitar o mostrar la barra de desplazamiento. Puede tomar 

tres valores: 


value Es el valor por defecto e indica que la barra de desplazamiento solo sera 
mostrada si es necesario (es decir si el documento HTML completo no 
cabe en el espacio reservado al frame) 
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HSPACE y MARGINWIDTH 


VSPACE y MARGINHEIGHT 


ALIGN 


BORDER 


BORDERCOLOR 


yes significa que las barras de desplazamiento deben mostrarse siempre 
no indica que no se mostraran nunca. 


Al igual que ocurrfa con las imagenes se puede especificar un margen alrededor 
del frame flotante. Con estos atributos concretos indicaremos la distancia minima 
en pixeles que debe haber entre el frame y cualquier otro elemento que este a su 
derecha o izquierda (margen horizontal). Es decir, sirve para especificar la anchura 
del margen. La unica diferencia entre ambos atributos es que marginwidth es el 
nombre aceptado por el estandar y hspace esta considerado como una extension de 
Explorer. 

Con estos atributos indicaremos la altura en pixeles del margen del frame. Al igual 
que antes marginheight es el nombre aceptado por el estandar y vspace esta 
considerado como una extension de Explorer. 

Permite alinear el frame respecto a la ventana del navegador y respecto al resto de 
elementos de la pagina. De nuevo, este atributo funciona exactamente igual que con 
las imagenes y puede tomar los mismos valores: left, middle, right, top y bottom. 

En la figura 8.34 podemos ver un ejemplo con dos frames flotantes uno alineado a la 
izquierda (align=" left") y el otro a la derecha (ALiGN="right"). En el frame 
izquierdo hemos incluido un margen de 100 pixeles (marg i nw f DTH=10 0) y en el 
derecho hemos quitado la barra de desplazamiento (scROLLiNG=no). 

Este atributo es una extension de Explorer y tiene la misma funcion que el atributo 
del mismo nombre de la etiqueta frame, indicar el grosor en pixeles del borde que 
delimita el frame. 

Con este atributo podremos cambiar el color del borde. Es, al igual que el anterior, 
una extension de Explorer no aceptada por el estandar HTML 4.0. 
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Figura 183. Usando framborder=0 podemos eliminar el borde del frame. Sin embargo 
si el contenido no cabe en frame la barra de desplazamiento si se mostrara. 
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Figura 184. Con los atributos align, marginwidth y scroll podremos controlar las 
diversas caracteristicas de los frames flotantes. 


Q Frames flotante - Microsoft Internet Explorer 


Archive Edicion Ver Ir a Favorites Ayuda 




Ejemplo de frames flotantes usando los atributos i 
FRAMEBORDERy MARGINWIDTH 


FRAME FLOTANTE 



Los dos frames us an FRAMEBORDERy 
para ocultar el borde. El frame de la tzquierc 
(ALIGN= M left M ) tiene un margen lateral de 
pixels (MAR.GEHWIDTH=20), mientras c 
frame de la derecha (ALIGN= M right") us a 
SCROLUNG=no para ocultar la barra de 


— | desplazamiento. 

d 


L 


IT 


Margen de 20 pixeles 
Barra de desplazamiento visiblt 


Listo 


“lib 


Con esto terminamos el aprendizaje del uso de frames en paginas web. En el proximo capftulo del curso nos 
adentraremos en el mundo de los sonidos, videos y otros contenidos multimedia en el World Wide Web. 
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Animaciones, videos, musica, sonidos, y mucho mas son los nuevos contenidos que encontramos cada vez mas a 
menudo en el World Wide Web. Todo con los objetivos de hacer un web mas atractivo o emplearlo como nuevo 
medio de distribucion de arte. Sin embargo es importante tener cuidado para no hacer paginas web que solo 
puedan ser vistas en determinados navegadores. 

En los ultimos anos la informatica ha conocido lo que se ha convenido a llamar la revolucion multimedia, cada vez 
es mas facil encontrar CD-ROMs con multitud de imagenes, videos, animaciones tridimensionales, juegos con una 
calidad grafica y sonora impactante y mucho mas. Esta revolucion tambien ha salpicado a Internet y en concrete 
al World Wide Web. Sin embargo los contenidos multimedia dejan de ser divertidos cuando tenemos en cuenta las 
velocidades actuates de la Red de Redes y los problemas de incompatibilidad entre distintas plataformas (distintos 
ordenadores y/o sistemas operativos). El gran potencial del contenido multimedia en el WWW consiste en el gran 
interes que provoca, pero por en los que a Internet se refiere debe limitarse a pequenos ficheros de sonido o video. 
Afortunadamente con un poco de ingenio esto no sera problema para crear efectos muy atractivos. 

Cuando hablamos de multimedia en paginas Web debemos diferenciar entre los contenidos multimedia externos 
y los contenidos denominados inline. Esta diferenciacion es muy similar a la que hicimos con las imagenes, con 
el termino inline nos referimos a todos los elementos que se incluyen en la misma pagina Web, junto con el texto, 
listas, encabezados, etc. Las imagenes o ficheros multimedia extemos se enlazaran a esta pagina de manera que 
seran bajados cuando los navegantes seleccionen el enlace apropiado. La gran pregunta es <;cual debo usar?. Para 
responder a esta pregunta veamos las principales ventajas de cada uno: 


Multimedia inline Su gran ventaja es que aparece directamente junto con el resto de elementos de la 

pagina y esto es mucho mas comodo para los navegantes. 

Multimedia externa Nos permitira incluir muchos mas formates de sonido, video y cualquier otro fichero 

multimedia, ya que si el navegador no lo entiende llamara a alguna aplicacion que 
le ayude. Estas aplicaciones auxiliares pueden ser configuradas por el usuario del 
navegador. 

La conclusion puede ser que en general podemos incluir contenido multimedia inline siempre y cuando este en un 
formate entendido por los navegadores y no ocupe demasiado tiempo de carga (es decir que su tamano en bytes 
sea pequeno). En caso de ser un archivo grande o de un formate no soportado por los navegadores debemos usar 
multimedia externa. 
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Nota 

Es una norma de etica entre los creadores de paginas del WWW incluir tanto el formato de los archivos 
como su tamano en el texto que sirve como enlace o en un texto, por ejemplo: Video QuickTime [.mov] 
de 200 Kb de la <a href=" dumbo 3 ,mov"> escena del elefante rosa </A> de la pelicula Dumbo. De 
esta manera el navegante podra decidir si le merece o no la espera de cargar el archivo. 

Pasemos a estudiar cada uno de estos metodos mas en detalle. 

Sonido video y otros ficheros externos 

Para enlazar un fichero multimedia externo a una pagina Web no hay mas que crear un enlace a ese documento: 


<A HREF="fichero_multimedia"> 
multimedia 

</A> 


El siguiente paso vendra por parte del navegante que debe seleccionar dicho enlace (esto significa pulsar sobre el 
texto en Navegadores graficos, pero no olvidemos a los demas). Y ^que ocurre entonces?. Para algunos tipos de 
ficheros, como pueden ser imagenes, archivos de texto o, por supuesto, documentos HTML, el propio navegador 
puede ser capaz de mostrar el contenido en su misma ventana. En muchos otros casos, sin embargo, el navegador 
bajara el fichero al ordenador del navegante y una vez alii se lo pasara a otro programa que sea capaz de entenderlo. 
Estos programas reciben el nombre de aplicaciones auxiliares o, en ingles, helper applications, y pueden ser 
configurados por el usuario del navegador para elegir que aplicaciones deben ser usadas para cada uno de los 
tipos de archivos. En la figura 10.2 podemos ver el cuadro de dialogo de configuracion de Netscape Navigator 
4.0™, por su parte las ultimas versiones de Microsoft Internet Explorer™usan directamente la configuracion de 
Windows para averiguar que programa debe llamar en cada ocasion: 
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Figura 10.2. Netscape Navigator™ permite configurar en este cuadro de dialogo las 
aplicaciones extemas asociadas a cada navegador. 


Preferences 


Category: 

B- Appearance 
!■■■■ Fonts 
; - Colors 
Navigator 

I I ;■■■■ Languages 
Applications 
+! Mail &: Groups 
; 0 - Composer 
I El - Offline 
| EtL Advanced 


Applications Specify helper applications for different file types 

Description 


iGrahco CorelDRAW 7.0 


| Grupo de programas de Microsoft 
| Hoja de calculo de Microsoft Excel 
I Hoja de estilo hipertexto 
| Hypertext Markup Language 
| Imagen ART 

j Informacion sobre la instalacion 
| Internet Communication Settings 
j Internet Document Set 

File type details 

Extension: CDR CDT PAT 

MIME Type: 

Handled By: CORELDRW 




OK Cancel | Help 


Si un navegador no es capaz de averiguar cual es el formato de un fichero mostrara un mensaje preguntando al 
usuario que debe hacer: guardar el fichero en el disco duro, elegir un programa que entienda el fichero o alguna 
otra opcion. 

Una pregunta que nos podemos hacer es £como es capaz el navegador de reconocer que tipo de fichero es el que 
hemos enlazado?. Sin duda debe hacerlo de alguna forma, porque si no, no podrfa decidir a que aplicacion llamar 
o si debe mostrarlo el mismo. De hecho no existe un solo metodo, sino dos. Por un lado la extension del fichero: 
Las paginas HTML deben tener la extension .html o .htm, las imagenes GIF deben tener la extension .gif, los 
ficheros PKZIP deben tener terminacion .zip, etc. Cuando el navegador lee ficheros directamente del disco duro 
usa la extension para determinar de que tipo de fichero se trata. 
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Cuando el navegador obtiene una pagina de un servidor Web entra en funcionamiento el segundo de los metodos, 
que consiste en averiguar el tipo de fichero MIME asociado al archivo o content-type. Este es un codigo que 
usan los servidores Web para indicar que tipo de fichero estan mandando. Algunos ejemplos de content-type 
son: text/plain (texto normal), text/html (documento HTML), image/gif (imagen GIF), vfdeo/mpeg (video con 
formato MPEG) o application/msword (Documento de Microsoft Word™). Tanto el navegador como el servidor 
Web tienen tablas que relacionan las extensiones con el tipo de fichero (content-type) asociado. Y el navegador 
tiene un data adicional: la aplicacion que debe usar con ese tipo de fichero. 

Ficheros de sonido 

Para incluir un enlace a un fichero de sonido desde una de nuestras paginas Web dicho fichero debe estar un 
formato apropiado para contener sonido, tal y como ocurrfa con las imagenes. Al igual que con estas existen 
multitud de formatos distintos y sera nuestra labor elegir el mas apropiado. A continuacion haremos un repaso de 
los formatos mas importantes. 

El formato AU creado por Sun Microsystems™ es el unico que es soportado por todas las diferentes plataformas 
de Internet, entre ellas Windows™, UNIX™ y Macintosh™. Este formato permite varios tipos de codificacion de 
sonido, aunque el mas popular es la codificacion de 8 bits conocida como u-law por lo que en ocasiones el formato 
AU se llama directamente formato u-law. Los ficheros AU tienen una calidad aceptable, pero sin ser demasiado 
buena debido a la codificacion de 8 bits que provoca un efecto parecido al del sonido telefonico. 

Para conseguir mayor calidad de sonido pueden usarse los formatos WAVE (.wav) para Windows, A IFF para 
Macintosh™ o MPEG sound. El principal problema de los dos primeros es que solo funcionan en sus respectivas 
plataformas y en ninguna otra. El formato MPEG sin estar tan extendido como AU si esta presente en multitud de 
plataformas y puede usarse con mayor libertad. 

Por ultimo nos encontramos con el formato Real Audio que ha sido desarrollado especfficamente para reproducir 
ficheros de sonido en Internet y en el World Wide Web. En la figura 10.3 podemos ver la pagina Web creada por 
RealAudio que ofrece gran cantidad de information asf como el software necesario para crear y escuchar este tipo 
de sonido: 


12T 
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Figura 10.3. RealAudio es un formato de sonido especificamente creado para la red el 
software necesario para su reproduccion puede ser obtenido a traves de su Web. 



La gran ventaja que ofrecen frente al resto de formatos es que, mientras que en estos es necesario esperar a que 
llegue todo el fichero para poder escucharlo, Real Audio soporta una tecnica conocida como streaming que nos 
permitira escuchar el sonido segun va llegando y solo una pequena pausa ocurre al principio antes de empezar a 


12T 
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ofrse. El unico inconveniente que tiene este formato consiste en que es necesario instalar un servidor especial para 
poder enviar este tipo de ficheros y enlazarlos a la pagina requiere una tecnica ligeramente distinta que veremos 
un poco mas adelante. 

Para que un navegador reconozca el tipo de sonido es necesario que el fichero tenga la extension adecuada. En la 
tabla 10.1 podemos ver la extension asociada a cada uno de los distintos formatos vistos hasta ahora. 

Figura tabla 10.1. 


Formato de Sonido 

Extension asociada 

AU/|_i-law 

.au 

AIFF/AIFC 

.aifF, .aif 

WAVE/WAV 

.wav 

MPEG Audio 

,mp2 


Una vez tenemos el fichero de sonido con el formato adecuado no tenemos mas que escribir el codigo necesario 
para incluirlo en la pagina Web. Por ejemplo: 


<A HFER="Siafonia_5.au"> 

quinta sinfonia 

</A> 


En este caso hemos usado el formato AU por ser el mas extendido. Si queremos mayor calidad debemos usar 
alguno de los otros tres formatos, pero en ese caso es recomendable ofrecer no solo un formato sino varios, a 
traves de diferentes enlaces para asegurarnos que todo el mundo tiene acceso al sonido si asf lo desea. 

Ficheros de video 

Al igual que los ficheros de sonido, existen multitud de formatos para codificar video. El estandar actual en el 
World Wide Web es MPEG video, que sera entendido en multitud de plataformas. Este formato, al igual que 
MPEG audio, ha sido creado por una organization de expertos en video y sonido que tienen presencia en Internet 
en la direccion www.mpeg.org[http://www.mpeg.org] (ver figura 10.4). 
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Figura 10.4. La organizacion MPEG es la creadora de este estandar que permite la 
codificacion de audio y video de gran calidad en archivos de pequeno tamano. 





Search MPEG.ORG 
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Otras opciones son el formato AVI creado por Microsoft™ para su sistema Windows ™ y que necesita de la 
aplicacion Video For Windows™ para ser visto o QuickTime™, creado por Apple ™ y que ultimamente se ha 
estado extendiendo por el Web gracias a la expansion de diversos visualizadores en diversas plataformas. En la 
tabla 10.2 vemos las extensiones asociadas a cada uno de estos tres archivos: 
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Figura tabla 10.2. 


Formatos de video 

Extension asociada 

MPEG 

.mpeg, .mpg 

QuickTime 

.mov 

AVI 

.avi 


A1 igual que ocurria con las imageries el ultimo paso consistira en insertar el codigo HTML: 


Recx6n llegado de EEUU 
<A HREF="showl.mpeg"> 
unas escenas 

</A> 

de la ultltaa pellcula de George Lucas . 


Un truco usado en ocasiones y con el que se consigue un interesante efecto consiste en convertir algun fotograma 
del video a imagen y hacer que esta misma sea un enlace al video, en este caso no debemos olvidar incluir en una 
description del video en la etiqueta ALT: 


<A HREF="showl,mpeg"> 

<IMG SRC="foto02.gif" 

ALT="Escenas de la ultima pelicula de George 
Lucas"> 

</A> 


Otros tipos de archivos 

Los enlaces a archivos externos no estan limitados a imagenes y video. Actualmente el World Wide Web esta 
plagada de multitud de otros formatos entre los que destacan los archivos comprimidos ZIP (.zip o .gz [UNIX]), 
los ejecutables (.exe) y archivos PDF (Portable Document Format) que pueden ser vistos por Acrobat Reader™ 
que se distribuye gratuitamente. Tambien se encuentran a menudo imagenes en multitud de formatos como Corel 
Draw™ (.cdr), Adobe Freehand™ o Adobe Photoshop ™(.psd) entre otros. 

Cuando un enlace a uno de estos ficheros sea pulsado el navegador nos permitira guardarlo en el disco duro o bien 
abrirlo usando una aplicacion externa si es un archivo de tipo conocido. En la figura 10.5 vemos un caso en el 
que hemos pulsado sobre un enlace a un archivo con formato ZIP e Internet Explorer ™ nos preguna si deseamos 
abrirlo o guardarlo en el disco duro: 
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Figura 10.5. A1 pulsar sobre un enlace a un archvo que no puede mostrar el mismo, 
Internet Explorer™ muestra este cuadro de dialogo preguntando al usuario que quiere 
hacer. 



Netscape Navigator™ actua de forma practicamente identica, en la figura 10.6 vemos el cuadro de dialogo que 
muestra la version 4.0 en ingles: 


12T 
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Figura 10.6. Cuadro de dialogo para archivos extemos mostrado por Netscape 
Navigator™. Si elejimos open la aplicacion externa asociada sera ejecutada. 



Multimedia Inline 

Hasta hace muy poco el unico sistema disponible en el WWW para incluir contenido multimedia era usar archivos 
externos como acabamos de ver. Sin embargo gracias a las iniciativas de Microsoft™ y Netscape™ estan 
apareciendo nuevas etiquetas y atributos del lenguaje HTML junto con nuevas tecnicas que permiten al disenador 
de paginas Web incluir dicho contenido en una pagina. 

Video inline 

Uno de los primeros mecanismos fue introducido en Microsoft Internet Explorer™. Este navegador incluye 
extensiones a la etiqueta IMG que permiten insertar video con formato AVI. Estas extensiones han sido adoptadas 
tambien por el navegador Opera™, pero por ningun otro, y tampoco por el estandar HTML 4.0 pero al ser ignorado 
por los navegadores que no lo soportan no impide la legibilidad de la pagina para los usuarios de estos. 

La extension en la que se basa la inclusion de video inline es el atributo dynsrc. Este atributo se usa de manera 
muy similar al ya conocido SRC, pero ahora el valor debera ser la direccion de un video en formato AVI en lugar 
de una imagen. Una de las grandes ventajas de este sistema para insertar video consiste en la posibilidad (de 
hecho es obligatorio) de usar simultaneamente los dos atributos mencionados, SRC y dynsrc, de manera que si 
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el navegador soporta la inclusion de video en la pagina mostrara el video y en caso contrario mostrara la imagen. 
Veamos un ejemplo: 


:IMG DYNSRC="baile.avi" 
SRC="baile. gif 
ALX="[Un baile]"> 


Tambien es posible usar el resto de atributos de la etiqueta img como align, vspace, hspace, width, height, 
etc. Pero ademas de estos, Microsoft™ introdujo otros nuevos como acompanamiento del atributo dynsrc y que 
nos permitiran tener un mayor control sobre el video, estos son: 


1 controls: Este es un atributo que no toma ningun valor. Si es incluido, muestra el video AVI junto con una 
serie de controles para que el usuario pueda parar y reproducir el video a su antojo. 

1 loop: Toma como valor un numero que determina el numero de veces que el video sera mostrado. Por ejemplo 
con LOOP="5" el video volvera a reproducirse desde el principio 5 veces y luego parara. Con un valor LOOP= 
"-1" el video sera repetido infinitas veces. 

1 start: Determina cuando debe empezar a reproducirse el video. Puede tomar dos valores: con 
start="fileopen" (valor por defecto) el video se reproducira tan pronto como la pagina y el fichero de 
video lleguen al ordenador; con start="mouseover" el video no empezara a reproducirse hasta que el 
usuario situe el cursor sobre el. 

1 loopdelay: [Solo Internet Explorer 4.0™] Con este atributo podemos especificar el retardo en milisegundos 
que el navegador esperara tras acabar antes de empezar a reproducir el video de nuevo. 


El atributo lowsrc 

Este atributo es una extension de Netscape™ a la etiqueta IMG. Su funcion es ofrecer la posibilidad al programador 
de especificar una segunda imagen, junto con la indicada con SRC, que sirva de previsualizacion de la imagen 
final. Esta previsualizacion suele ser la misma imagen pero con peor calidad, por ejemplo en formato JPEG con 
alto grado de compresion, y de mucho menor tamano. De esta forma cargara mucho antes y el navegante podra 
hacerse una idea de como sera la imagen completa antes de que esta llegue: 


:IMG SRC="alta_calidad.gif" 
LOWSRC="baja_calidad.gif"> 


Los navegadores que no entiendan esta etiqueta simplemente la ignoraran, y no mostraran nada hasta que la imagen 
de alta calidad llegue, exactamente igual que si no hubieramos usado LOWSRC. Por tanto podemos concluir que 
este atributo no causa ningun prejuicio para los usuarios de dichos navegadores. LOWSRC no ha sido aceptado 
por el estandar HTML 4.0. 

Animaciones usando LOWSRC 

Pronto los disenadores de paginas Web se dieron cuenta que podian usar el atributo LOWSRC para algo mas que 
para mostrar una previsualizacion de la imagen. Existen varios Webs que destacan por su excepcional diseno que 


329 " 
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se sirven de este atributo para crear una sencilla animacion formada unicamente por dos imagenes. Un excelente 
ejemplo de este efecto puede ser visto en la pagina creada por Josh Feldman que encontramos en la direccion: 

• www.spectacle.com/zoloft/initiation/letter.html[http://www.spectacle.com/zoloft/initiation/ letter.html] 

En esta pagina se usa el atributo LOWSRC para mostrar una imagen de un sobre cerrado y SRC para mostrar ese 
mismo sobre de fondo pero en primera instancia la carta ya abierta. En la figura 10.7 podemos ver la pagina tal y 
como aparece inicialmente con el sobre cerrado (imagen LOWSRC) y la carta final abierta que es mostrada pocos 
segundos despues. 
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Figura 10.7. Usando el atributo LOWSRC se pueden crear animaciones sencillas pero 
impactantes como es el caso del web de Spectacle. 



Sonidos Inline 

Microsoft Internet Explorer™ tambien ha introducido una nueva etiqueta para posibilitar la inclusion de sonido en 
las paginas Web. Este sonido sera cargado junto con la pagina y empezara a ser tocado sin requerir ninguna accion 
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por parte del usuario. Para incluir un sonido de fondo como este debemos usar la etiqueta bgsound. Veamos un 
ejemplo: 


Esta etiqueta no producira ningun efecto visual en la pagina, simplemente si empezara a reproducirse el sonido de 
fondo. Los usuarios de otros navegadores no seran perjudicados por la inclusion de este atributo, simplemente no 
podran orr el sonido. 

El resto de atributos son: 


1 loop: A1 igual que con el video este atributo permite controlar el numero de veces que el fichero de sonido 
sera reproducido. Si usamos LOOP="-l" se reproducira repetidamente hasta que el navegante abandone la 
pagina. 

1 balance: (Solo Internet Explorer 4.0™ o posterior) Este atributo permitira al programador Web cambiar 
el balance de sonidos estereo. Puede tomar un valor entre -10000 y 10000. El efecto de cada uno de los 
dos extremos dependera de la configuracion del navegante, pero en cualquier caso ambos significaran que el 
sonido se oira unicamente por uno de los dos altavoces. Con los valores intermedios controlamos el balance 
en uno u otro. 

1 title: (Solo Internet Explorer 4.0™ o posterior). Con este atributo damos un titulo al sonido. Este titulo es 
solo informativo y no se mostrara ningun indicativo visual. 

1 volume: (Solo Internet Explorer 4.0™ o posterior). El volumen con el que se reproducira el sonido puede 
ser controlado gracias a este atributo que puede tomar un valor entre -10000 y 0. Si usamos VOLUME="0" 
(maximo volumen) el sonido se reproducira al 100% de la configuracion actual del usuario. Usando un valor 
menor el volumen bajara, no hay ninguna forma usando HTML de aumentar el volumen por encima de la 
configuracion elegida en su ordenador por cada persona. 


Nota 

Es muy importante no poner un sonido que pueda resultar molesto a los visitantes de nuestras paginas, 
ya que con ello conseguiremos que las abandonen rapidamente para dejar de oirlo. 

Microsoft Internet Explorer™ soporta tres formatos de sonido inline: 


• AU: El formato de Sun ™ que usa la codificacion u-law. 

• WAV: Muestras de sonido especfficas para Windows™. 

• MIDI: Estos ficheros deben tener la extension .mid. 

Hay que tener mucho cuidado a la hora de incluir sonidos en nuestras paginas, ya que en general este tipo 
de ficheros son de gran tamano y pueden incrementar enormemente el tiempo de carga. Por otro lado no es 
recomendable que sea reproducido mas de una vez, ya que la repeticion cansara a los visitantes. 
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Nota 

En el directorio Sonido hemos incluido un ejemplo (sonido'. .jstft) que usa la etiqueta bgsound para 
reproducir como sonido de fondo un archivo en formato MIDI. 

A1 igual que ocurrla con las extensiones para video de Microsoft™ la etiqueta bgsound no es soportada por 
ningun otro navegador y tampoco ha sido aceptado por el estandar HTML 4.0. Sin embargo existe otro metodo 
que veremos un poco mas adelante mucho mas extendido basado en PLUG-INs y en una etiqueta llamada embed. 

Marquesinas animadas 

Cuando de HTML se trata, una marquesina animada consiste en una llnea de texto que se desplaza por la pantalla 
de izquierda a derecha, de derecha a izquierda o en ambas direcciones altemativamente. La etiqueta especlfica 
de Internet Explorer™ marquee nos permitira crear este tipo de marquesina con gran facilidad y rapidez. No 
seran necesarias imagenes ni videos. Tal y como ocurrla con las dos extensiones que acabamos de ver, la etiqueta 
MARQUEE sigue siendo especlfica de Explorer™ y no es soportada por ningun otro navegador ni ha sido aceptada 
por el estandar HTML 4.0 

El funcionamiento de esta etiqueta es muy sencillo, consta de una instruccion de inicio y otra de fin, entre ellas 
debemos escribir el texto que queremos que se desplace. Por ejemplo: 


<MARQUEE> 

Me estoy moviendo 
</MARQUEE> 


Si visualizamos este codigo con Internet Explorer™veremos aparecer el texto “Me estoy moviendo” por la derecha 
de la pantalla y desplazarse hacia la izquierda hasta llegar al borde izquierdo de la pantalla. Entonces volverla 
a aparecer de nuevo por la derecha y as! indefinidamente. Es diflcil plasmar con una figura el movimiento de la 
marquesina, por esta razon hemos incluido todos los ejemplos de esta seccion en el en el archivo marquee. hi§pfc- 
[extra/marquee.htm]. Ademas en la figura 10.8 hemos capturado una pagina con este codigo en siete instantes de 
tiempo consecutivos para que el lector pueda hacerse una idea del funcionamiento de la marquesina animada: 
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Figura 10.8. La marquesina animada muestra un texto que va moviendose de derecha a 
izquierda en la ventana del navegador. En esta figura vemos 7 momentos consecutivos. 
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El texto de una marquesina se situa siempre en una nueva h'nea, y el es mostrado con las mismas caracteristicas que 
seria cualquier texto normal de la pagina, por ello podemos usar las etiquetas para formatear texto que conocemos 
para cambiar el formato del texto de una marquesina. Por ejemplo para conseguir un encabezado de tamano 1 
moviendose podrfamos usar: 


<H1> 

<MARQUEE> 

Me estoy moviendo 
</MARQUEE> 

</Hl> 
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Igualmente podemos cambiar el color o el tipo de fuente del texto encerrando la marquesina con la etiqueta FONT: 


<t-osi c0J.OH«"#FFOood , > 
FACE="arial" 

<MARQUEE> 

Me estoy moviendo 
</MARQUEE> 

</FONT> 


Nota 

Internet Explorer 3.0™ ignora todo el codigo HTML existente entre la instruccion de inicio, <marquee>, 
y la instruccion de fin, </marquee>. Sin embargo en Internet Explorer 4.0™ esta polltica ha cambiado y 
es posible usar las etiquetas formateadoras de texto o saltos de llnea en su interior. Por esta razon debemos 
tener en cuenta que si usamos estas nuevas posibilidades los usuarios de Internet Explorer 3.0™ (que son 
muchos) no podran apreciar el formato del texto. 

Como cambiar la apariencia 

Ademas de estos metodos la propia etiqueta marquee consta de una serie de atributos que nos permitiran cambiar 
su apariencia: 


1 bgcolor: Especificando un color en codigo RGB (#RRGGBB) o por nombre (blue, red, etc.) cambiaremos 
el color de fondo de la marquesina. 

1 height y WIDTH: Determinan la altura y anchura respectivamente de la marquesina. Ambos atributos pueden 
tomar un valor en pixeles o bien como porcentaje de la ventana del navegador. Por ejemplo height="50%" 
provocara que la marquesina tenga una altura mitad de la de la ventana del navegador. Estos atributos no 
afectan al tamano del texto. 

1 hspace y vspace: Determinan los margenes entre los hordes de la marquesina y el texto u otros elementos de 
la pagina. hspace determina el margen a cualquiera de los lados y vspace los margenes superior e inferior. 

•ALIGN: Este atributo controla el alineamiento vertical del texto que bordea la marquesina. Puede tomar 
cinco valores diferentes: a^IGKf="top" (arriba), ALlGN="middle" (centro), ALlGN="botfyg>i<" (abajo), 
align=" left" (izquierda) ALIGN="right" (derecha) que tienen un comportamiento identico al que tenlan 
con las imagenes. Este atributo no modifica la posicion del texto en el interior de la marquesina, ya que este 
esta siempre en la parte superior. 
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Una vez vistos estos atributos nos queda por hacer un ejemplo que los use. Nuestro objetivo sera crear una 
marquesina con el fondo rojo, que ocupe una anchura mitad de la pantalla y este alineado a la derecha. El codigo 
que debemos usar es: 


<H1> 

<MARQUEE ALI®t»*RIGHT" 

BGCOLOR="#FF 0000" 

HEIGHT—"20%" 

WIDTH="50%"> 

Gran oferta del MES : Un Mercedes a precio de coste 
</MARQUEE> 

</Hl> 


En la figura 10.9 podemos ver el resultado obtenido: 

Figura 10.9. La etiqueta marquee esta acompanada de numerosos atributos que nos 
permiten controlar la apariencia de la marquesina. 
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Para una mejor apreciacion es recomendable visualizarlo con Internet Explorer™ por lo que este ejemplo esta 
incluido en el directorio Ejemplo4 (ejemplo 4). 

Como cambiar el comportamiento 

Como hemos comentado antes, cuando creamos una marquesina el texto se desplaza de derecha a izquierda 
desapareciendo totalmente antes de volver a mostrarse por la derecha. Este efecto continua indefinidamente lo 
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suficientemente despacio para posibilitar su lectura. Este comportamiento, direccion, numero de repeticiones y 
velocidad de movimiento puede ser modificado con 5 atributos de la etiqueta marquee: 


1 behavior: Este atributo nos permite cambiar el comportamiento del texto y puede tomar tres valores. 
behavior= "-scroll" es el valor por defecto y consiste en el efecto de desaparecer por un lado y aparecer por 
el otro. Si usamos behaviOR= i' s 1 i de " el texto tiene un comportamiento similar pero para en cuanto llega al 
borde derecho. La ultima opcion es behavior=" alternate", en este caso el texto aparecera igualmente por 
la derecha, pero una vez llegue al borde izquierdo rebotara y volvera hacia la derecha donde volvera a rebotar 
repitiendo este comportamiento indefinidamente. Los ejemplos 5 y 6 de la pagina de ejemplos marquee. htrft 
[extra/marquee.htm] muestran estas dos ultimas posibilidades. 

1 direction: Con este atributo podemos controlar la direccion de desplazamiento del texto cuando este es de 
tipo SCROLL. Puede tomar dos valores: left (izquierda) y right (derecha) siendo el primero el valor por 
defecto (movimiento de derecha a izquierda). En el ejemplo 7 del archivo antes mencionado podemos ver un 
ejemplo de este atributo. 

1 loop: Determina cuantas veces se repetira el desplazamiento del texto por la pantalla. Por ejemplo con 
scroll=" 4 " el texto se desplazara por la pantalla unicamente 4 veces, mientras que si usamos scroll="-1 " 
o bien scroll=" infinity" seguira desplazandose indefinidamente. 

1 scrollamount: Aunque haya sensacion de movimiento el texto se desplaza a pequenos saltos. Este atributo 
determina el numero de pixeles que debe desplazarse el texto en cada uno de ellos. Junto con el siguiente 
atributo podemos controlar la velocidad del movimiento. Si ponemos un valor alto el texto se movera mas 
rapidamente pero con saltos mas bruscos (ejemplos 8 y 9). 

1 SCOLLDELay: Determina el tiempo de espera entre cada uno de los saltos. Este tiempo debe estar dado 
en milisegundos. Valores mayores tambien provocan mayor rapidez y brusquedad. Experimentando con 
scrollamount y scrolldelay encontraremos la combinacion con la que satisfacemos nuestras necesidades 
de velocidad y suavidad de desplazamiento (ejemplos 10 y 11). 


Texto que parpadea 

Junto con el navegador Navigator 1.0™, Netscape™ introdujo una extension al lenguaje HTML que permite 
insertar texto que parpadea. Esta extension consiste en una unica etiqueta: blink. Su funcionamiento es simple, 
todo el texto que introduzcamos entre la instruccion de inicio y la instruccion de fin parpadeara. Por ejemplo: 


<BLINK> 

Este texto parpadea 
</BLINK> 


En el WWW encontramos en numerosas ocasiones con esta etiqueta siendo usada en general para llamar la 
atencion. El problema de blink es que resalta demasiado. Como hace que el texto parpadeante atraiga la atencion 
y el parpadeo es continuo (no para en ningun momento) puede provocar distraccion y provocar que los navegantes 
no se fijen en nada mas de nuestra pagina. 

La gran mayorfa de disenadores Web desaconsejan encarecidamente el uso esta etiqueta porque muchos nave¬ 
gantes lo consideran muy molesto. De hecho en el WWW se dice habitualmente que la etiqueta blink es el 
equivalente informatico a rallar una pizarra con las unas. 
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Si lo que queremos es resaltar una frase es recomendable usar las etiquetas de HTML pensadas para ello, aparte, 
si queremos podemos usar blink, pero as! nos estaremos asegurando que la frase aparecera resaltada (aunque no 
parpadee) en todos los navegadores. 

Controles multimedia 

Con Internet Explorer 4.0™, Microsoft™ ha introducido un conjunto de controles multimedia que permiten 
insertar graficos y efectos multimedia a las pagina Web. Entre estos controles destacan: 


• Behaviors: Comportamientos especiales de los controles y otros elementos de la pagina. 

• Effects: Aplica un filtro grafico a cualquier elemento de una pagina. 

• Hot Spot: Permite especificar acciones a realizar al pulsar en diferentes zonas de la ventana del navegador. 

• Mixer: Mezcla varios ficheros de sonido WAV. 

• Path: Permite crear movimiento de objetos por un camino establecido. 

• Sequencer: Facilita el control del tiempo en los eventos de nuestra pagina. 

• Sprite: Sirve para crear animaciones. 

• Sprite Buttons: Para crear botones animados. 

• Structured Graphics: Permite incluir en la pagina graficos que pueden ser cambiados de tamano y rotados por 
el navegante. 

El uso de estos controles puede ser algo complicado y se sale fuera de los objetivos de este curso. Microsoft™ 
ha creado una pagina dedicada a las nuevas tecnologlas de Internet Explorer 4.0™, de la cual podemos ver una 
muestra en la figura 10.10: 
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Figura 10.10. Internet Explorer 4.0™ incluye una serie de nuevas tecnologias entre las 
que destacan los nuevos controles multimedia. 


Q Internet Explorer 4.0 Technologies - Microsoft Internet Explorer 
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en la direccion: 


• www.microsoft.com/sitebuilder/workshop/prog/ie4/[http://www.microsoft.com/sitebuilder/workshop/ 
prog/ie4/] 

donde podemos encontrar amplia information. Para un tutorial concreto sobre estos controles podemos acceder a: 
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1 www.microsoft.com/workshop/prog/ie4/directani/directani.htm[http://www.microsoft.com/workshop/prog/ie4/ 
directani/direc tani.htm] 


Plug-ins y objetos incrustados 

Uno de los avances que han aparecido recientemente en el World Wide Web que se han asentado con mayor fuerza 
son los llamados PLUG-INs. Estos son una especie de aplicaciones auxiliares que trabajan junto con el navegador 
ofreciendole nuevas caracterfsticas. Por ejemplo un plug-in de Excel™ podrfa permitir que hojas de calculo de 
esta aplicacion pudieran ser mostradas directamente en una pagina Web. Otro de video permitiria incluir video 
inline de diferentes formatos a los vistos. 

No debemos confundir los plug-ins con las aplicaciones auxiliares externas de las que hemos hablado anterior- 
mente. Su funcionamiento es parecido, pero estas se ejecutan de manera totalmente independiente al navegador, 
mientras que los plug-ins se ejecutan con el y le anaden nuevas capacidades inline. 

Netscape™ introdujo el concepto de plug-ins con Navigator 2.0™. Actualmente existen numerosos plug-ins de 
audio y video disponibles y la nueva version de Netscape Navigator™ incluye muchos de ellos que le anaden 
soporte de AU, AIFF, WAV, MIDI y QuickTime ™. 

El problema de los plug-ins es que si usas sus capacidades en una pagina Web todos los visitantes necesitan tener 
un navegador que soporta plug-ins (como Navigator™ o Internet Explorer™) ademas del plug-in correspondiente, 
para visualizarla correctamente. Actualmente la gran mayoria de plug-ins han sido desarrollados para Netscape 
Navigator™ 3.0 y 4.0 y para Internet Explorer™ 3.0 y 4.0. Los plug-ins mas conocidos y usados son: 


1 Acrobat Reader: Permite mostrar ficheros de tipo PDF (Portable Format Document, Documento de formato 
portable). Mas informacion en: 


www.adobe.com/prodindex/acrobat/main.html[http://www.adobe.com/prodindex/acrobat/ 
main.html] 


1 Shockwave: Shockwave es un plug-in creado para permitir la reproduccion de Videos creados con Macrome¬ 
dia Director™ de manera inline en una pagina Web. Macromedia Director™ es una herramienta enormemente 
popular entre los desarrolladores profesionales de contenido multimedia para crear presentaciones que in- 
cluyan video y sonido. Para obtener mas informacion podemos acceder a la pagina dedicado a ello de la cual 
se ofrece una muestra en la figura 10.11: 
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Figura 10.11. Macromedia™ distribuye a traves de su Web el plug-in necesario para 
visualizar en un Web animaciones creadas por su herramienta Director™. 
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La direccion de la pagina es: 
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• www.macromedia.com/shockwave[http://www.macromedia.com/shockwave] 


1 RealAudio y RealVideo: Afiaden al navegador de reproducir audio y video en estos dos formatos especialmente 
disenados para el WWW. Para mas informacion podemos acceder a la pagina: 


• www.realaudio.com[http://www.realaudio.com] 

Junto con estos tambien es posible encontrar numerosos plug-ins dedicados a mostrar contenido multimedia y 
mundos virtuales VRML (Virtual Reality Modeling Languaje, Lenguaje de modelado de realidad virtual). 

El primer paso para usar un plug-in es crear el objeto que queremos incluir en nuestra pagina. El proceso de 
creacion depende del tipo de objeto. Para archivos de sonido y video seran necesarios programas de edicion 
y retoque de estos. Para objetos mas avanzados como Acrobat™ o Shockwave ™ sera necesario adquirir las 
herramientas necesarias para su creacion. 

Como usar los plug-ins 

El siguiente paso sera insertar en nuestra pagina, usando codigo HTML, el objeto que queremos que sea usado 
por el plug-in. El propio navegador al darse cuenta que no es capaz de mostrar ese objeto el mismo buscara entre 
la lista de plug-ins que tiene instalados y llamara a aquel que es capaz de tratar con el objeto. Desgraciadamente 
si no lo encuentra mostrara un mensaje o un icono indicativo que puede resultar molesto para el navegante. 

El termino elegido para denominar a estos objetos es embedded objects, es decir, objetos incrustados. La etiqueta 
HTML con la que insertamos este tipo de objetos es embed. El atributo SRC nos permitira indicar el nombre y 
direccion del archivo tal y como haciamos con las imagenes. Otros atributos usados en multitud de ocasiones son 
width y height con los que podemos controlar la anchura y altura del objeto respectivamente. Un ejemplo tipico 
de insertion de un objeto para plug-in podrfa ser: 


<EMBED SRC="pelicula.mov" 
WIDTHa"120" 
HEIGHT="180"> 


Este objeto aparecera en su propia linea y centrado en la ventana del navegador. Ademas de los tres vistos la 
etiqueta EMBED tiene una serie de atributos opcionales que varian enormemente entre los diferentes plug-ins. 
Todos ellos constan del nombre de un parametro y su valor. Por ejemplo para el plug-in de video QuickTime™ 
nos encontramos, con el parametro loop="TRUE". Para averiguar los atributos concretos deberemos leer la 
documentation concreta de cada plug-in. 

Alternativas para navegadores sin soporte para PLUG-INs 

Al usar PLUG-INs estamos imponiendo muchos requisitos a los navegantes para ver correctamente nuestras 
paginas. Como ya hemos mencionado antes, deben tener un navegador con soporte para plug-ins y ademas 
deben tener instalado el plug-in adecuado. Si no los cumplen recibiran mensajes de error o cuadros de dialogo 
que permiten obtener el plug-in necesario(el atributo PLUGiNSPAGE="url" nos permite indicar la direccion). 
En otros casos simplemente veran un espacio vacio en la pagina con un icono indicativo de error como el que 
podemos ver en la figura 10.12, con la consiguiente frustration que ello conlleva para el navegante. 


W 
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Figura 10.12. Si el navegador tiene algun problema con el plug-in muestra un icono y un 
espacio en bianco que puede estropear la apariencia de nuestra pagina. 
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Los navegadores que no tengan soporte para plug-ins directamente ignoraran la etiqueta embed. Para ofrecer una 
alternativa al objeto incrustado se ha creado la etiqueta noembed, que consta de una instruccion de inicio y otra 
de fin entre las que pueden insertarse cualquier elemento de HTML. Esta etiqueta puede ser usada con diferentes 
propositos: 


• Mostrar una imagen que represente el significado del objeto. 

• Incluir un enlace al fichero del objeto, es decir, incluirlo como fichero externo. De esta forma el navegante 
podra verlo con el programa que quiera. 

• Poner cualquier codigo HTML, applet de Java o algun otro elemento que ayude a que la presentation de la 
pagina tenga sentido tambien para navegadores sin soporte de embed. 

Pongamos un ejemplo en el que hemos creado una animation en la que se van mostrando pisadas como si alguien 
fuese pisando por encima de nuestra pagina. Podrfamos ofrecer como alternativa a la animation una imagen que 
incluya todas las pisadas y como alternativa a la imagen una serie de asteriscos. Es decir: 


<EMBED SRC="huellas.cdr" 
WIDTH="$40" 

HEIGHT="3Q" 

ALT=" * * ****** *"> 
<NOEMBED> 

<IMG SRC="huellas.gif" 
WIDTH="640" 
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HEIGHT=":If-fe 

</NOEMBED> 


Todo el codigo entre la instruction de initio, <noembed >, y la instruction de fin, </noembed> , sera ignorado 
por los navegadores que entiendan la etiqueta embed. 

Sonido inline con la etiqueta EMBED 

En una section anterior aprendimos a insertar sonido inline para el navegador Internet Explorer™ usando la 
etiqueta bgsound. El principal inconveniente de esta etiqueta radicaba en que solo los usuarios de ese navegador 
serfan capaz de oirlo. Con la etiqueta embed se nos ofrece la posibilidad de insertar sonido que pueda ser oido 
tambien por los usuarios de Netscape Navigator™ gracias a un plug-in que se incluye en la instalacion estandar. 
Veamos un ejemplo: 


<EMBED SRC="reggae.mid" 
WIDTH="0" 

HEIGHT="0" 

AUTOSTART="t rue"> 


Con los atributos WIDTH y HEIGHT puestos a cero conseguimos que los controles de sonido no sean mostrados y 
usando AUTOSTART=" true" hacemos que el sonido empiece a reproducirse inmediatamente. Esto es necesario, 
ya que al esconder los controles no hay otra forma para comenzar la reproduction. 

Pero ahora viente lo mas interesante del tema. Podemos anadir el codigo HTML para insertar sonido para Internet 
Explorer™ entre las instrucciones < noembed> y </noembed>, con lo que conseguimos compatibilidad con los 
dos navegadores principales. El codigo completo queda: 


<EMBED SRC="reggae.mid" 
WIDTH="0" 

HEIGHT="0" 
XOTQSTART="true"> 
<NOEMBED> 

<BGSOUND SRC="reggae.mid"> 
</NOEMBED> 


Si hubieramos usado width=“ 1S0" y heigth="70" se hubieran mostrado los controles de sonido. En la figura 
10.13 vemos dichos controles en Internet Explorer 4.0™(que soporta la etiqueta embed al contrario que la version 
3.0): 
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Figura 10.13. Usando los atributos width y height de la etiqueta embed podemos 
lograr que los controles de sonido aparezcan. Internet Explorer™ usa los controles de 
Windows™. 



y en la figura 10.14 vemos el resultado del mismo codigo en Netscape Navigator 4.0™. 
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Figura 10.14. El plug-in usado por Netscape navigator ™ ha creado sus propios controles 
que tienen la capacidad ahadida de poder controlar el volumen. 
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Si en el capitulo anterior vimos el cambio radical que sufria el WWW con la insertion de contenido multimedia la 
revolution llevada a cabo por la tecnologia Java™ y los controles ActiveX™ no se queda atras. Estos dos nuevos 
elementos permiten, no solo insertar contenidos activos, sino ademas llegar a interactuar con el navegante de una 
manera antes impensable. 

Java™ en las Paginas Web. 

Hasta ahora hemos visto una serie de metodos que nos permiten incluir sonido, video y otros contenidos 
multimedia asi como multitud de archivos de diferentes formatos en una pagina Web. A1 insertar alguno de 
estos objetos conseguimos incluso tener cierta interactividad con el visitante de las paginas y gracias a ellos 
quedan cubiertas gran parte de nuestras necesidades, pero seguimos teniendo algunas limitaciones. Gracias al 
lenguaje Java™ podremos insertar contenido multimedia con mucha mayor libertad y, lo que es mas importante, 
conseguiremos interactividad completa con los navegantes. 

Java™ es un lenguaje de programacion desarrollado por la empresa Sun Microsystems. En la actualidad esta 
misma empresa se encarga, junto con otras empresas asociadas, de su desarrollo. En la pagina Java™.sun.com 
(figura 11.1) podemos encontrar gran cantidad de recursos relacionados con Java™, incluyendo tutoriales, libros 
o codigo algunos de los cuales se distribuye gratuitamente. Centrandonos en el lenguaje, este es muy similar a 
los usados para realizar las aplicaciones que usamos habitualmente en nuestros ordenadores (Word™, Netscape, 
Explorer™ o el propio Windows™). La gran diferencia de Java™ con respecto a otros lenguajes consiste en 
la posibilidad de hacer pequenos programas y ejecutarlos desde una pagina Web. Estos programas reciben el 
nombre de applets Cada dia hay mas paginas en Internet que los usan consiguiendo lo que hasta hace poco era 
imposible. En la pagina de GameZan(www.Gamelan.com) podemos encontrar gran cantidad relacionada con la 
tecnologia Java™, en la figure 11.2 podemos ver una muestra de esta pagina. En una de sus paginas de su nueva 
ubicacion: www.developer.com/directories/pages/dir.Java™.sites.html nos ofrecen un listado de las mejores Webs 
que podemos encontrar hoy en dia que usen la tecnologia Java™, es muy recomendable visitar alguna de ellas 
para hacernos una idea real de lo que puede llegar a conseguirse usando este excelente lenguaje. 
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Figura 11.1. En la pagina Web de Sun Microsystems, creadora del lenguaje Java™, 
podemos encontrar gran cantidad de documentacion y ejemplos de sus posibilidades. 
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Figura 11.2. Gamela es una excelente fuente de recursos Java™ conocida desde hace 
tiempo. En la actualidad su direccion esta en proceso de cambio a: www.developer.com. 
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pueden ser usados libremente en nuestras paginas. En esta seccion aprenderemos a insertarlos en nuestras paginas 
y a usarlos adecuadamente para aprovechar las posibilidades de esta nueva tecnologfa. 

Nota 

La propia companfa Sun Microsystems ha creado una pagina en la que se muestran ejemplos y se 
distribuyen gratuitamente gran cantidad de applets. La direction es: Java™.sun.com/applets/index.html. 

Otra forma de buscar applets gratuitos en el WWW consiste en dirigirse al fndice Yahoo y buscar la 
cadena "Java™ applets". 

Insercion de Applets Java™. 

De ahora en adelante consideraremos que ya tenemos un applet, bien porque lo hemos programado nosotros 
mismos, bien porque estamos usando un applet de distribution gratuita, es hora de aprender a insertarlo en nuestra 
pagina Web. Para ello usaremos una nueva etiqueta: applet. Esta etiqueta esta formada por una instruccion de 
inicio, <applet>, y una instruccion de fin, </applet>. 

Nota 

La etiqueta applet fue introducida por Netscape en la version 2.0 de Navigator™ fruto de un acuerdo 
con Sun para soportar la tecnologfa Java™. Todos sus navegadores posteriores tambien la soportan. El 
otro gran navegador, Microsoft Internet Explorer™, soporta la tecnologfa Java™ desde la version 3.0. En 
cuanto al estandar se refiere, esta etiqueta se incluye en la especificacion HTML 3.2, aunque no podemos 
asegurar que los navegadores posteriores que respetan la norma HTML 3.2 soporten la tecnologfa Java™, 
simplemente entienden la etiqueta, pero no son capaces de ejecutar un applet. 

La insercion de un applet en una pagina es similar a la insercion de una imagen, a lo cual ya estamos muy 
acostumbrados. Deberemos especificar el archivo donde se encuentra el applet y las dimensiones (anchura y 
altura) que este debe ocupar en la pagina. Al igual que ocurrfa con las imagenes el applet se introducira en el 
lugar exacto donde indique su codigo, si es necesario se insertara entre el texto, pero no pasara a una nueva lfnea, 
como sucedfa con las marquesinas, si no lo indicamos especfficamente (con la etiqueta <br>). Para indicar el 
archivo en el que se encuentra el applet usaremos el atributo code y para especificar la anchura y altura en pixeles 
usaremos wiDTHy height respectivamente. En resumen, para insertar un applet debemos usar el siguiente codigo 
en cualquier lugar de la pagina: 


<APPLET CODE="nombre_applet.class" WIDTH "ancho" 0EIGHT= n alto"> 
</APPLET> 


Los tres atributos que hemos usado deben incluirse obligatoriamente siempre que insertemos un applet. Esto 
parece obvio con el atributo code, ya que no se podrfa insertar el applet sin indicar donde esta, pero resulta mas 
extrano con los atributos width y height. Aun asf, si no especificamos el tamano que debe ocupar el applet 
en la pagina no sera mostrado ni ejecutado por el navegador. Debemos estar muy atentos a este detalle ya que 
hasta ahora estos dos atributos eran totalmente optativos y por ello es un error comun olvidarlos y no ser capaz de 
descubrir porque no funciona el applet. 

Y aquf vemos como insertar un applet de ejemplo: 


<HTML> 

<HEAD> 

<TlTLE>Applet sonoro</TI:LS> 
</HEAD> 

<B0DY> 
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<APPLET CODE="SoundExample.class" WIDTH=450 HEIGHT»SO></APPLET> 
</BODY> 

</HTML> 


Aviso 

Los applets de Java™ son sensibles a las mayusculas y a las minusculas, si no ponemos el nombre del 
archivo exactamente igual, incluyendo mayusculas o minusculas, no hubiera funcionado. Por ejemplo, si 
hubieramos escrito CODE=" soundexample. class " el codigo anterior no hubiera funcionado. Este es 
un ejemplo muy comun por lo que debemos tener cuidado. 

Si visualizamos este archivo con un navegador que soporte la tecnologia Java™ debemos obtener el resultado de 
la figura 11.3. 

Figura 11.3. Este es el aspecto que muestra nuestro primer applet insertado en una pagina 
Web. En un navegador con soporte Java™ podemos pulsar sobre los botones para obtener 
diferentes sonidos. 
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Nota 

Los applets Java™ tienen la terminacion .class, como ya hemos comentado antes, esto exige que para 
poder usar un applet debemos utilizar un sistema operativo que soporte nombres largos. Desgraciada- 
mente los usuarios de Windows™ 3.1 no podran probar esta tecnologfa localmente en su ordenador. 
Afortunadamente esto no significa que no puedan disfrutar los applets que esten publicados en el WWW. 

Pasemos a explicar que ocurre cuando el navegador se encuentra con el codigo anterior. En primer lugar busca el 
archivo SoundExample. class en la misma direccion URL y en el mismo directorio donde se encuentre la pagina 
actual y lo baja a nuestro ordenador (este es un ejemplo en el que ambos archivos ya estan en nuestro ordenador, 
con lo que este paso no serfa necesario). Mientras reserva un rectangulo, con las dimensiones especificadas por 
los atributos width y height, donde sera mostrado el applet. Una vez ha llegado el archivo anterior el navegador 
llama a lo que se conoce como maquina virtual Java ™ (tambien llamada JVM, Java™ Virtual Machine ) que 
pasara a ejecutar el applet. A partir de ese momento el applet se ejecutara como cualquier otro programa de 
nuestro ordenador, aunque lo hara en el interior de la pagina Web. De esta forma cuando nuestro cursos este 
dentro del rectangulo de 450x50 creado el control pasara al applet y si pulsamos los botones el propio applet 
sera el encargado de realizar las acciones oportunas. La Maquina Virtual Java™ implementa ademas ciertas 
medidas de seguridad para que el applet no pueda, por ejemplo, borrar nuestro disco duro. Una vez conocemos 
el funcionamiento de los applets podemos adentramos mas a fondo en las diferentes caracterfsticas de estos que 
pueden ser modificadas con el lenguaje HTML. 

Especificando la direccion del applet. 

Dejando a un lado el ejemplo y volviendo al codigo general es obvio que el codigo es, todavfa, muy sencillo. Para 
empezar el archivo con el applet (que siempre tiene la extension .class) se encuentra en el mismo directorio que 
el documento HTML de la pagina actual. Lo habitual, sin embargo, es agrupar todos los applets Java™ en un 
directorio dedicado de la misma manera que hacfamos con las imagenes. Podrfamos pensar que para reflejar este 
cambio no tendnamos mas que cambiar ligeramente el codigo y escribir: 


<APPLET CODE="applets/rioiabre_applet.class" WIDTH="ancho" HEIGHT="alto*> 
</APPLET> 


Por desgracia, este codigo es incorrecto. El atributo code permite unicamente especificar el nombre del archivo 
donde se encuentra el applet, pero no podemos incluir un directorio ni, por supuesto, una direccion de Internet. 
^.Significa esto que es imposible? Afortunadamente no, los disenadores de esta etiqueta pensaron en ello e 
introdujeron un nuevo atributo, CODEBASE, que nos permitira indicar la direccion URL o ruta de directories donde 
se encuentre el archivo especificado en el atributo code. Usando CODEBASE podemos reescribir el codigo anterior 
de manera correcta: 


<APPLET CODEBASE="applets/" CODE="nombre_applet. class" WIDTH="ancho" HEIGHT="alto"> 
</APPLET> 


Sin embargo podemos ir mas alia. Podemos usar en nuestra pagina un applet que se encuentre en cualquier 
otro lugar del WWW sin tener que copiarlo a nuestro servidor. Para ello no tendremos mas que usar el atributo 
CODEBASE para especificar la direccion base. Por ejemplo: 


<APPLET code TicTacToe.c:ass width=120 height=1^0^ 
CODEBASE="http: // Java™. sun. com/applets/TicTacToe/l. 1/ "> 
■K/ APPLET> 


T5 T 
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Esta direction es real, si incluimos este codigo en una pagina habremos insertado un juego de las tres en raya como 
el que vemos en la figura 11.4 en el que cualquier visitante de nuestra pagina podra jugar (contra el ordenador). Si 
vemos en cualquier pagina un applet que nos gusta y sus autores permiten que sea utilizado en paginas ajenas (esto 
es muy importante) no debemos dudarlo y usarlo. La carga del applet no sera mas lenta que si estuviera en nuestro 
mismo servidor y ademas tendremos a nuestra disposicion una mayor cantidad de applets, ya que muchos autores 
permiten el uso de applets siempre y cuando estos no sean copiados de su servidor sino usados directamente desde 
el. 

Figura 11.4. Usando applets Java™ podemos insertar juegos interactivos como en este 
caso. Usando el atributo CodeBase no es necesario que el applet este en nuestro servidor. 



Otros atributos de la etiqueta applet. 

Ademas de los cuatro atributos que hemos vistos hasta ahora, que suelen usarse practicamente siempre, existen 
otros que pueden resultarnos muy utiles. Todos ellos se encuentran incluidos en el estandar HTML 3.2: 
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name= "nombre del applet": Este atributo es usado para identificar el applet entre el resto de elementos 

u otros applets de la pagina. Poner el nombre del applet no es necesario, pero los 
buenos programadores aconsejan hacerlo por una cuestion de estilo. Por otro lado 
tener el applet identificado es tremendamente util o incluso obligatorio si posterior- 
mente queremos que este se comunique, por ejemplo, con codigo Java™Script. 

align : Con esta etiqueta podremos controlar el alineamiento horizontal de la pagina. 

Puede tomar tres valores: left, right y center para conseguir que el applet 
este alineado a la izquierda, a la derecha o este centrado respectivamente. El 
funcionamiento de estos tres valores es similar al de las imagenes y si especificamos 
un alineamiento a cualquiera de los dos lados el texto circundante envolvera al 
applet. 

vspace= "pixeles Con este atributo establecemos un margen vertical del tamano en pixeles especifi- 

cado. El margen vertical se refiere a la distancia entre la parte superior del applet y 
los elementos de la pagina que esten sobre el y entre la parte inferior y los elementos 
situados debajo. 

hspace= "pixeles Este atributo nos permite establecer el ancho del margen horizontal, es decir el 

espacio entre el applet y los elementos que esten situados a su derecha y a su 
izquierda. 

alt=" texto alternative ": Esta etiqueta es usada por aquellos navegadores que si entienden la etiqueta 

mm, P ero no so P or tan la tecnologfa Java™. Todos los navegadores que cumplan 
la norma HTML 3.2 entienden esta etiqueta, pero eso no quiere decir que sean 
capaces de ejecutar un applet. Esto ocurre, por ejemplo, con los navegadores de solo 
texto, ya que al ser los applets graficos en su mayorfa no son capaces de mostrarlos 
en pantalla. Este texto tambien es mostrado si en un navegador con soporte de 
tecnologfa Java™ tiene algun problema y no es capaz de ejecutar el applet. 

Continuando con el ejemplo anteriormente mostrado podemos usar estos atributos para obtener un codigo mas 
completo. Para empezar es muy recomendable usar siempre los atributos name y alt, con lo que quedarfa 
(mostramos unicamente el codigo correspondiente a la insertion del applet): 


<APPLET CODE="SoundExample.class" WIDTH=450 HEIGHT=50 ALT="Su navegador soporta la^ 
tecnologfa Java™, pero por algun erjsojr no es capaz de -p'ostr.ar este applet". , 

NAME= Ejemplo Sonoro"> 

</APPLET> 


Por otro lado podemos usar el atributo ALIGN para que el texto bordee el applet. En este caso es recomendable 
usar tambien vspace y hspace para crear un margen: 


<APPLET CODEBASE= "e j 1 / " CODE="SoundExample . class" WIDTH=4'5& HEIGHT=50 ALIGN=”left" < _ J 
HSPACE=15 VSPACE=15> 

</APPLET> 


Escribiendo texto antes y despues de esta etiqueta obtenemos el resultado de la figura 11.5. 
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Figura 11.5. Usando los atributos align, vspace y hspace podemos insertar un applet 
rodeado de texto. 
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Los atributos anteriores son los que aparecieron inicialmente junto con la etiqueta APPLET y que fueron adoptados 
por el estandar HTML 3.2 pero ademas de estas, tanto Microsoft como Netscape han ido incorporando otros 
nuevos en sus navegadores: 


Bark! | Start sound loop | itop sound Icq. | Reload sounds 


ARCHiVE="archivo_comprimido”: Permite especificar un archivo auxiliar al applet de Java™ donde 

pueden ser insertados todas las imagenes, sonidos y cualquier otro archivo auxiliar 
que pueda ser necesario para la ejecucion del applet. La existencia de este atributo 
ha sido pensada para comprimir todos los archivos auxiliares en uno solo de menor 
tamano para que el tiempo de carga sea menor. Cualquier otro fichero que necesite el 
applet que no este incluido en este archivo comprimido sera buscado por los metodos 
habituales. Este atributo es exclusivo del navegador Netscape Navigator™. 

mayscript: Este atributo se usa por si solo, sin ningun valor, y su presencia significa que el 

applet Java™ puede ser accedido usando codigo Java™Script. 
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t i tle= "t ext o Este atributo exclusivo de Internet Explorer™ 4.0 permite indicar un texto que 

sera mostrado en un bocadillo cuando el navegante pase el raton por encima del 
applet. Aunque el contenido de este atributo solo es entendido por Explorer™ puede 
ser usado con total libertad, ya que no perjudica nada a los usuarios del resto de 
navegadores. 

Estos son todos los atributos que pueden ser usados en la etiqueta applet, pero existe otro metodo adicional para 
especificar parametros particulares de cada uno de estos programas escritos en Java™: la etiqueta param. 

La etiqueta param. 

Esta etiqueta consta de una unica instruccion, <param>, que debe ser insertada en el interior de la etiqueta applet 
(entre la instruccion de inicio y la instruccion de fin) y cuya funcion sera definir parametros para el applet. Los 
parametros son propiedades especfficas de cada applet que permiten modificar sus caracterfsticas. Los parametros 
cons tan de un nombre y un valor que son indicados usando los atributos name y value de la siguiente manera: 


<APPLET CODE="nombre_applet.class" WIDTH="ancho" HEIGHT="alto"> 
<PARAM NAME "nornbre_pararr.etpo" VALUE="valor_parametro"> 
</APPLET> 


La etiqueta param puede ser usada tantas veces sea necesario para un mismo applet siendo necesario usarla una 
vez para cada uno de los parametros. En general los applets que se distribuyen gratuitamente constan de gran 
numero de parametros, para poder adaptarse a las necesidades de los distintos usuarios que vayan a utilizarlo. Por 
esta razon siempre van acompanados de documentation. Quiza el applet mas conocido es Animator. class, este 
applet toma un conjunto de imagenes y las va mostrando ordenadamente para crear un efecto de animacion. Este 
era el unico metodo existente para crear animaciones antes de la aparicion de los GIFS animados. Tras la aparicion 
de estos la utilization de este applet ha decrecido, pero sigue siendo util en ciertas ocasiones y nos servira como 
excelente ejemplo para mostrar el uso de la etiqueta param. Para insertar el applet debemos copiar el contenido 
de este directorio a otra ubicacion y crear un documento HTML con el siguiente codigo: 


<HTML> 

<HEAD> 

<TITLE>E1 saludo de Duke</3ST3tLE> 

</HEAD> 

<BODY> 

<APPLET CODE="Animator. class" WIDTH=>§5 HEIGHT=68> 

<PARAM NAME="imagesource" VALUE="."> 

<PARAM NAME=ENDIMAGE VALUE=10> 

<PARAM NAME=PAUSE VALUE=100> 

<PARAM NAME=PAUSES VALUE "25CG|JQC|100 I 100 I 100|100|100|100||100"> 
</APPLET> 

</BODY> 

</HTML> 


En este caso hemos usado 4 parametros del applet, aunque en realidad tiene muchos mas. Los explicaremos 
brevemente. El parametro imagesource nos permite indicar el directorio donde se encuentran las imagenes, un 
punto significa el directorio actual. Estas imagenes deben llamarse obligatoriamente Tl. gif,, T2.gif, T3.giM 
etc. El parametro endlmage indica el numero de imagenes de los que consta la animacion y en esta ocasion 
seran 10, desde Tl. gif hasta T2. gif. Los parametros pause y pauses nos permiten controlar las pausas entre 
las imagenes, con el ultimo controlamos de manera independiente las pausas que se realizan entre cada una de 
las imagenes de manera individual. A1 visualizar este codigo con un navegador con soporte Java™ veremos la 
mascota de Java™, Duke, saludando. En la figura 11.6 podemos apreciar una capture del resultado. Una gran 
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ventaja de este metodo para crear animaciones es que simplemente cambiando las imagenes Tl. gif, T2. gif, 
etc. por unas propias podemos crear otra animation distinta sin necesitar ninguna aplicacion como era el caso de 
los GIFs animados. 

Figura 11.6. El applet Animator.class es uno de los mas conocidos y usados en las 
paginas Web por la facilidad que ofrece para crear animaciones. 



Nota 

Para obtener mas information sobre el applet Animator.class o sobre muchos otros applets de 
distribution gratuita podemos visitar la pagina antes mencionada Java™.sun.com. 

Alternativas a los applets Java™. 

Dado que la tecnologla Java™ es relativamente nueva y requiere grandes recursos por parte del navegador, solo 
algunos como Netscape Navigator™ 2.0 o superior y Internet Explorer™ 3.0 o superior la soportan. Dado que no 
sabemos que navegadores usaran los visitantes de nuestras paginas es conveniente anadir alternativas para aquellos 
que no sean capaces de mostrar el applet. Anteriormente hemos vis to la existencia del atributo alt que permite 
especificar un texto alternativo. Sin embargo tiene dos inconvenientes: 


Este atributo solo sera entendido por aquellos navegadores que entiendan la etiqueta applet, con lo que 
seguimos sin tener una alternativa para el resto de navegadores. 
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• Con alt unicamente podemos insertar un texto, ni imagenes ni ningun otro elemento HTML, con lo que 
nuestras posibilidades para ofrecer alternativas quedan muy menguadas. 

Afortunadamente existe otro metodo. Como hemos indicado al principio de esta seccion, y como ya hemos 
comprobado por los ejemplos, la etiqueta applet consta de una instruccion de inicio y de una instruccion de fin. 
Vimos que entre ellas podfamos insertar una o varias etiquetas param para especificar los parametros especfficos 
de cada applet. Pero ademas podemos insertar otras etiquetas HTML que seran ignoradas por aquellos navegadores 
con soporte Java™, pero seran mostradas por todos aquellos que no soporten esta tecnologfa, con lo que nos servira 
como contenido alternative al applet: 


<APPLET CODE="nombre_applet.class" WIDTH="ancho" HEIGHT="alto"> 
<PARAM NAME "norsbro_pa rdmetro" VALUE="valor_parametro"> 

. . . Codigo HTML alternative . . . 

</APPLET> 


Siguiendo con el ejemplo de la mascota de Java™, si queremos que nuestra pagina este preparada para todos los 
navegadores debemos anadir el atributo alt asf como contenido altemativo antes de la instruccion </applet>. 
He aquf un ejemplo: 


<APPLET CODE="Animator.class" WIDTH=55 HEIGHT=68 ALT="Lo siento no puede ver el^ 
applet"> 

<PARAM NAME="imagesosi:rce" VALUE="."> 

<PARAM NAME=ENDIMAGE VALUE 1C> 

<PARAM NAME=PAUSE VALUE=100> 

<PARAM NAME=PAUSES VALUE="2500 | 100 | 100 | 100 | 100 | 100 I 100 ] 100 | 100"> 

<IMG SRC="I5.gif" WIDTH=5S HEIGHT=68 ALT="Duke te saluda"> 

</APPLET> 


En este caso los usuarios de navegadores sin soporte Java™ veran una imagen de Duke saludando (aunque sin 
movimiento) del mismo tamano que el applet. Si en el texto de la pagina hemos hecho referenda a que los 
navegantes van a ver un applet en action debemos insertar tambien junto con la imagen un texto que advierta que 
el applet no puede ser visualizado con ese navegador y que a cambio se muestra una imagen. En la figura 11.7 
vemos el ejemplo anterior visto con el navegador Opera™, que no soporta la tecnologfa Java™. En un medio 
estatico como este no se aprecia la diferencia, pero esta existe, ya que en este caso la imagen no tiene movimiento. 
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Figura 11.7. El navegador Opera™ no soporta la tecnologia Java™, por lo que mostrara 
el codigo alternativo, en este caso uno de los GIFs de la animacion. 



Con este ejemplo damos por concluido el aprendizaje de la etiqueta applet. En la figura 11.8 podemos ver un 
ejemplo. 
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Figura 11.8. Resumen de todos los atributos de la etiqueta applet y de su subetiqueta 
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El nuevo estandar: la etiqueta object. 

Hasta ahora hemos aprendido a insertar diferentes tipos de objetos en las paginas Web, para insertar imageries 
usabamos la etiqueta img, para insertar objetos para plug-ins usabamos embed, para insertar frames flotantes 
iframe, para insertar applets Java™ applet, etc. Observando esta diversidad y viendo que cada desarrollador 
de navegadores creaba sus propios metodos para incluir objetos en las paginas el consorcio W3C creo un grupo de 
trabajo para buscar una solution que englobara y unificara todos los metodos actualmente existentes. La solution 
fue la creation de una nueva etiqueta para el lenguaje HTML: object, que fue introducida en el estandar HTML 
3.2, aunque es a partir de la version HTML 4.0 cuando se esta empezando a darle la importancia que merece. 

Usando esta etiqueta es posible incluir varios tipos de ficheros multimedia (video y sonido MPEG, ficheros 
Shockwave™/Director™, etc.), applets de Java™, controles ActiveX™ (que veremos en la siguiente section), 
documentos HTML o practicamente cualquier otro tipo de objeto. Por ejemplo para incluir un video AVI debemos 
usar el siguiente codigo: 


COBJECT DATA="flores.avi" TYPE="video/avi" WIDTH=100 HEIGHT=10f> 
<IMG SRC^^lores .fif" WIDTH-lSfft.HEIGHT-100 ALT=" [FLORES] "> 

</OBJECT> 


En este caso el funcionamiento es muy similar al de la etiqueta EMBED y ahora el codigo alternativo debera ser 
mostrado entre <ob ject> y </ob ject>. Este codigo sera ignorado por los navegadores que entiendan la etiqueta 

OBJECT. 

<;Que navegadores soportan este nuevo estandar? Las versiones 4.0 y posteriores de Internet Explorer™ y Netscape 
Navigator™ entienden la etiqueta, aunque todavia no soportan todas las posibilidades que ofrece. Sin embargo 
el Web Consortium le esta dando un fuerte impulso, con lo es de suponer que las futuras versiones de estos 
navegadores si no hagan y que poco a poco se tendera hacia un mayor uso de la etiqueta object. 

Esta section es solo una introduction a este nuevo estandar. Hemos considerado que un estudio detallado no 
era apropiado porque esta etiqueta no puede ser usada todavia de manera fiable(excepto para insertar controles 
ActiveX™ que enseguida veremos). El lector interesado puede adquirir mas information a traves del Web 
Consortium en las siguientes direcciones: 


•http://www.w3.org/pub/www/TRAVD-object.html 

• http://www.w3.Org/TR/WD-html40/struct/objects.html#h-14.3 

En la figura 11.9 hemos incluido de modo informativo la pagina del Web Consortium que explica el fun¬ 
cionamiento del atributo object y todos sus atributos. 
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Figura 11.9. La etiqueta object ha sido creada por los expertos del Web Consortium 
para englobar la inclusion de todo tipo de objetos en las paginas Web. 



Una section que si hemos considerado importante explicar es la insertion de los applets Java™ recien vistos 
usando la etiqueta applet, ya que aunque actualmente este metodo sea operativo, se ira imponiendo con el tiempo. 
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Insercion de un applet Java™. 

El objetivo actual del Web Consortium es que la etiqueta object conviva por un tiempo con la etiqueta applet 
para sustituirla mas adelante. Hoy en dfa el uso de la etiqueta object no esta muy extendido con lo que la forma 
mas segura de insertar un applet sigue siendo usando la etiqueta applet, sin embargo la siguiente generacion de 
navegadores permitira tambien el uso de object que acabara siendo el unico metodo aceptado y como buenos 
programadores nosotros debemos estar preparados. 

Para poder llevar a cabo todas las funciones de la etiqueta applet tambien es posible usar la etiqueta <param> 
para especificar parametros para los applets u otros objetos que los necesiten. Aunque esta etiqueta debe ser 
insertada entre <objeCT> y </object> no sera ignorado por los navegadores que entiendan esta etiqueta. 

Ademas la etiqueta param tiene dos nuevos atributos al ser usada en el interior de object, estos son: 


valuetype=" .. . ": Este atributo especifica que tipo de valor recibira el parametro. Hay tres posibles 

valores: 


Data: El valor especificado sera pasado al objeto como una cadena de carac- 

teres. Este es el valor por defecto y antes de la existencia del atributo 
valuetype era la unica posibilidad. 


Ref: El valor especificado es una direccion URL que indica donde estan 

almacenados los valores para dicho parametro. La direccion debe ser 
pasada tal cual al objeto. 


Object: El valor es el nombre de otro objeto del mismo documento prece- 

dido del sfmbolo ’#’. 

type= "tipo_mime ": Este atributo especifica el tipo mime del valor asignado a este atributo con value. 
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Exceptuando estas diferencias, el funcionamiento es identico. Por ejemplo, para insertar el applet del segundo de 
nuestros ejemplos (’El saludo de Duke’) usando la etiqueta object debemos escribir: 


COBJECT codetype="applicatt0ii^ftctet-stream" 
classid=" Java™: Animator .class" 
width=55 'he3;$jifh=68 

ALT="Lo sionLOj ©a puede ver el applet"> 

<PARAM NAME="imagesource" VALUE="."> 

<PARAM NAME=ENDIMAGE VALUE=10> 

<PARAM NAME=PAUSE VALUE=10Q> 

<PARAM NAME=PAUSES VALUE="2500|100|100|100|100|100|100|100(100| 100"> 
<IMG SRC="T5.gif" WIDTH=55 HEIGHI=68 ALT="Duke te saluda"> 

</OBJECT> 


Como vemos la diferencia con la etiqueta applet es pequena, con la unica complejidad anadida de indicar en el 
atributo CODETYPE el tipo mime del applet, que es el indicado en este ejemplo siempre. Esto es necesario para 
indicar al navegador que se trata de un applet de modo que si no soporta esta tecnologfa este pueda ser capaz de 
decidir no bajar el archivo. 

ActiveX™, la tecnologfa del futuro. 

La, denominada, tecnologfa ActiveX™ desarrollada por Microsoft hizo su aparicion en Internet con el navegador 
Internet Explorer™ 3.0. Su objetivo es similar al de los plug-ins, insertar objetos de diferente tipo en una pagina 
Web, aunque va mucho mas alia al anadir mayores posibilidades de interaction y comunicacion con programas 
externos. Existen paginas en Internet que basan toda su presentation en controles ActiveX™ para crear Webs 
realmente impactantes. En la figura 11.10 vemos la pagina de ForecastX que ofrece el parte meteorologico en 
tiempo real usando esta novedosa tecnologfa. 
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Figura 11.10. ForecastX ofrece un servicio meteorologico en tiempo real gracias a la 
tecnologia ActiveX™. 
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ActiveX™ esta compuesto por dos tipos de objetos: controles Activos (Active controls ) y documentos Activos 
(Active documents ). Estos ultimos permiten insertar documentos con formato PDF™, DOC™, etc. La tecnologia 
ActiveX™ funciona de una manera similar al mecanismo de Microsoft OLE™ (Object Linking and Embedding, 


155 " 

























Applets de Java y Controles ActiveX 


Enlazado e incrustacion de objetos) que usa su sistema operativo Windows™, por lo que los usuarios de este les 
resultara familiar, lo realmente novedoso es la aplicacion de esta tecnologfa al WWW. 

Los controles ActiveX™ guardan parecidos con los objetos para plug-ins y con los applets Java™, aunque presenta 
algunas mejoras con respecto a ambos. Como ocurrfa con los plug-ins, los controles y documentos de ActiveX™ 
pueden ser insertados en un pagina Web, sin embargo no requieren un pequeno programilla para cada tipo de 
objeto ActiveX™, esta nueva tecnologfa ha sido denominada como auto-contenn da porque cada objeto tiene 
suficiente informacion para ejecutarse el mismo sin ayuda de ninguna aplicacion. 

Tal y como ocurre con los applets podemos crear nuestros propios controles o usar los creados por otros 
programadores que nos los venden o distribuyen gratuftamente. Si optamos por programarlos nosotros mismos 
existen herramientas que lo convierten practicamente en un juego de ninos, entre ellas destaca las creadas para 
este fin por Microsoft y que distribuye a traves de su Web (www.microsoft.com/ie/). 

Hoy por hoy el unico inconveniente de la tecnologfa ActiveX™ consiste en que solo puede ser visto desde es 
sistema operativo Windows™ y con el Navegador Internet Explorer™, aunque afortunadamente parece que esto 
cambiara pronto. 

Insercion de un control ActiveX™. 

El codigo HTML necesario para insertar un control o documento ActiveX™ en una pagina Web fue desarrollado 
por Microsoft en colaboracion con el Web Consortium, con lo que se acordo el uso del estandar object que 
hemos visto en la seccion anterior. A continuation veremos un sencillo ejemplo que no requiere ningun archivo 
especial, el unico requisite para poder visualizarlo consistira en tener instalado el navegador Internet Explorer™ 
3.0 o superior. El codigo usado para insertar el control ActiveX™ sera: 


COBJECT WIDTH=250 HEIGHT=340 

CLASSID="clsid:99B4212 0-6EC7-11CF-A6C7-00AA00A47MJ2":> 

<PARAM NAME="angle" VALUE="55"> 

<PARAM NAME = "alignment" VALUE="2"> 

<PARAM NAME="BackStyle" VALUE- "3"> 

<PARAM NAME="caption" VALUE="CU£S0' WEBMASTER"> 

<PARAM NAME="FontNam©" VALUE="Arial”> 

<PARAM NAME "EontSizo" VALUE = "30"> 

<PARAM NAME = " F o n t B o Id ,r VALUE="1"> 

<PARAM NAME="Backcgior" VALUE="#006600"> 

<PARAM NAME "Forecclor" VALUE="#FFFFFF"> 

Para visualizar el control ActiveX™ necesita Explorer™ 3.0 o posterior. 
</0BJECT> 


En la figura 11.11 podemos ver el resultado obtenido tal y como se ve con Internet Explorer™ 4.0. Pasemos a 
explicar el este codigo: El valor del atributo class id es el que identifica el tipo de control ActiveX™ que estamos 
insertando. Este codigo es complejo y se sale de los objetivos de esta obra. 
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Figura 11.11. Usando este control ActiveX™ podemos crear efectos variados con texto, 
con lo que pueden sustituir el uso de imagenes con la consiguiente disminucion tiempo de 
carga de nuestras paginas. 



Volviendo a nuestro ejemplo, entre los principales parametros usados en la insercion de este control ActiveX™ 
encontramos: 
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Caption: Es el texto que debe insertarse con las caracterfsticas que se indican con el resto de 

parametros. 

Angle: Es el angulo del texto con la horizontal en grados. Si le damos el valor 90 el control 

mostrara el texto en vertical. 

Fon t Si ze: Es el tamano del texto. 

FontName: Es el tipo de letra. 

BackcpXory Forecolor: Son el color del fondo y el color del texto respectivamente. 

Invitamos al lector a hacer pruebas modificando los valores de estos y el resto atributos y cambiando el texto para 
adaptarlo a nuestras necesidades y poder incorporarlo en sus propias paginas. Vemos un ejemplo en la figura 
11 . 12 . 
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Figura 11.12. Usando el mismo control ActiveX™ que en la figura 11.25 pero con un 
codigo algo mas complejo podemos crear este efecto tan atractivo. 



Por ultimo nos queda resaltar que existe un plug-in para Netscape Navigator™, Ncompass, que anade a este 
navegador la posibilidad de entender controles y documentos ActiveX™. Este plug-in puede ser obtenido en 
la pagina Web de Ncompass en el WWW: www.ncompasslabas.com. Si pensamos incorporar la tecnologfa 








































Applets de Java y Controles ActiveX 


ActiveX™ a nuestras paginas es muy recomendable incluir una enlace a esta pagina para que todos los usuarios 
de Netscape que las visiten puedan adquirirlo y disfrutar, tambien, de los controles que hayamos usado. Tambien 
es importante destacar que Microsoft ha llegado a acuerdos con diversas compamas para exportar la tecnologfa 
ActiveX™ a Mac™ y UNIX, con lo que es de esperara que en poco tiempo se convierta en un metodo estandar 
para insertar objetos multi-plataforma aunque hoy por hoy no se puede decir que la sea, al contrario que Java™. 
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Jorge Ferrer 
Rodrigo Garcia 

Version 1.0 

Copyright Jorge Ferrer y Rodrigo Garcia. Se otorga permiso para copiar, distribuir y/o modificar este doc- 
umento bajo los terminos de la Licencia de Documentation Libre GNU, Version 1.1 o cualquier otra ver¬ 
sion posterior publicada por la Free Software Foundation. Puede consultar una copia de la licencia en: 
http://www.gnu.org/copyleft/fdl.html 

Para mas detalles consultenos a traves de la direccionjferrer@acm.org 

La habilidad de interactuar con los usuarios es una de las principales caracteristicas de los ordenadores y las redes 
informaticas. La posibilidad de realizar preguntas y recibir respuestas es una de las formas fundamentales de 
conseguir esta interactividad y el lenguaje HTML proporciona la habilidad de crear formularios e insertar cajas 
de texto, botones de option y otros controles que nos permitiran aprovechar esa posibilidad de interactividad en 
nuestras paginas Web. 

Formularios en HTML. 

No es necesario navegar mucho tiempo por Internet para encontrar paginas Web en las que se piden datos a 
los navegantes. Quiza las primeras paginas que hicieron uso de esta posibilidad fueron las de los sistemas de 
busqueda. Los formularios usados en estos sistemas son, en general, bastantes sencillos, unicamente es necesario 
un elemento, conocido como caja de texto, donde sea posible introducir la palabra o frase que deseamos buscar. 

En la figura 12.1 vemos un buen ejemplo de este tipo de uso. En ella vemos la pagina principal de Tower 
Communications se ofrece una caja de texto donde el usuario debe introducir una cadena de texto que desea 
buscar. Despues debe pulsar sobre el boton ENVIAR, tras lo cual se mandara la information al servidor Web que 
la procesara y respondera enviando la informacion encontrada. Mas adelante en la section ’Como usar los datos 
de un formulario’ veremos como es posible recoger y procesar esta informacion, pero por ahora nos centraremos 
en la creation y en el diseno de los formularios. 
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Figura 12.1. En la pagina principal de Tower Communications vemos un formulario que 
es usado para permitir a los visitantes introducir una cadena de texto que deseen buscar. 
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Un caso mas complejo de formularios es usado en las paginas en las que se ofrece a los navegantes la posibilidad 
de realizar sugerencias, ofrecer comentarios o mandar cualquier otro tipo de information. En general estos 
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formularios ocupan una pagina entera, y estan formados por diversos elementos. En la pagina de Tower podemos 
encontrar una pagina de sugerencias que ilustra la utilidad de esta forma de usar los formularios. En la figura 
12.2 podemos apreciar esta pagina, que como vemos permite introducir datos en varios campos, tras rellenarlos 
deberemos pulsar sobre el boton ’Enviar formulario’ para mandar la informacion. 



Formularios. 


Figura 12.2. En otra seccion de la pagina de Tower Communications vemos un formulario 
mas complicado formado por numerosas cajas de texto y otros elementos. 
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Estos dos ejemplos son probablemente los mas comunes entre las paginas del WWW, pero no los unicos. Los 























Formularios. 


formularios son muy versatiles, como enseguida veremos, y la posibilidad de interactuar con los usuarios de las 
paginas sera util en multitud de ocasiones. El unico lfmite sera nuestra creatividad. 

Si queremos preguntar a los visitantes de nuestras paginas su nombre, su direction de correo electronico, crear un 
sistema de busqueda, hacer un libro de visitas o simplemente pedir sugerencias necesitaremos crear formularios. 
Un formulario no es mas que un conjunto de elementos que permiten introducir datos a los visitantes de nuestras 
paginas de una manera sencilla. Estos datos son en general texto o una serie de opciones entre las que se debe elegir 
una o varias. En este capftulo aprenderemos todas las posibilidades que tenemos y como usarlas adecuadamente. 

El lenguaje HTML consta de una serie de etiquetas que permitiran crear de forma rapida y sencilla numerosos 
elementos de entrada de datos. Estos elementos, que reciben el nombre de controles, seran graficos en la mayorfa 
de navegadores, pero tambien existen metodos para que los navegadores que solo pueden mostrar texto, como 
Lynx™, puedan mostrarlos. Un formulario no es mas que un conjunto de estos controles cuya information sera 
enviada conjuntamente cuando el usuario pulse sobre el boton de envfo. 

Para crear un formulario el lenguaje HTML proporciona la etiqueta form. A1 contrario que la mayorfa de etiquetas 
que hemos visto en los ultimos capftulos esta existe desde la especificacion HTML 2.0 y por tanto es entendida 
practicamente por cualquier navegador existente actualmente, por lo que puede ser usada con total libertad. 

Esta etiqueta consta de una instruction de inicio, <form>, y una instruction de fin, </form>, entre las cuales 
podremos insertar todos los controles que deseemos. Dicho esto podemos crear nuestra primera pagina con un 
formulario. En ella adelantaremos uno de los controles mas usados y sobre el que ya hemos hablado antes: la caja 
de texto. Un poco mas adelante la trataremos mas en detalle, pero la usaremos en este ejemplo para hacernos una 
idea de como se crea un formulario en una pagina Web. Para empezar, como siempre que creamos una pagina 
nueva, creamos un archivo nuevo en nuestro editor de texto o nuestro editor HTML. En el debemos insertar el 
siguiente codigo: 


<HTML> 

<HEAD> 

<?1 TI,F>Korrnu.lari.c de e jemplo</TITLE> 
</HEAD> 

<B0Kf> 

<H1 >KCRMUi.AR I 0 DE EJEMPL0</H1> 

<FORM> 

I.ntroduzca filYiombre: <INPUT TYPE="Text"> 
</FORM> 

</BODY> 

</HTML> 


Guardamos el archivo con un nombre de nuestra election y lo abrimos con el navegador. El resultado sera muy 
similar, si no igual, al que apreciamos en la figura 12.3. La caja de texto es el elemento que sigue al texto 
’Introduzca su nombre:’. En este caso estamos usando para visualizarla el navegador Internet Explorer™ para 
Windows™ 95, por lo que la caja de texto tiene el aspecto habitual en este sistema operativo. Si visualizamos este 
mismo codigo desde un navegador de UNIX™ o Macintosh™ la caja de texto serfa mostrada con la apariencia 
habitual en estos entornos. 
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Figura 12.3. Nuestro primer formulario esta compuesto por una caja de texto. Para 
introducirla hemos usado la etiqueta input con TYPE="text". 
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La gran novedad de la caja de texto respecto a todos los elementos de las pagina Web que hemos vis to hasta ahora 
es que permite a los usuarios introducir texto en ella. Para ello no tenemos mas que pulsar con el raton sobre ella 
(o seleccionarla en el caso de navegadores de texto) y escribir como si estuviesemos en un editor de texto. El texto 
aparecera segun lo vamos escribiendo. Una vez hemos escrito nuestro nombre (ver figura 12.4) enviaremos los 
datos pulsando la tecla ENTER. 
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Figura 12.4. Pulsando sobre la caja de texto nos aparecera un cursor parpadeante que 
nos indica que podemos empezar a escribir texto. 
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Nota 

En este ejemplo todavia no hemos indicado al navegador donde debe enviar los datos. Esto se hace con el 
atributo action de la etiqueta form, que sera visto un poco mas adelante. Al no indicar la direction de 
destino el navegador no mandara los datos al pulsar la tecla ENTER (o pulsar el boton de envio), aunque 
por ahora nos olvidaremos de este detalle. 

Pero <;no existia un boton de envio? Si, en los ejemplos de la figura 12.1 y 12.2 veiamos que ambos formularios 
constaban de un boton de envio sobre el que habia que pulsar para mandar los datos. En los casos en los que 
el formulario conste de mas de un control, es decir, de mas de un campo de entrada de datos, sera necesario 
incluir el boton. Si el formulario simplemente tiene uno, como ocurre en este primer ejemplo que hemos realizado 
nosotros, el navegador es capaz de entender que al pulsar la tecla ENTER el usuario quiere mandar los datos de 
ese formulario, y por tanto el uso de boton de envio es opcional. 

Nota 

Los botones de envio son mostrados como enlaces normales en los navegadores de solo texto, y por 
tanto serfa mas correcto usar tambien el termino ’enlace para enviar el formulario’ . Sin embargo, por 
simplicidad, seguiremos usando unicamente el termino boton. 

Bien, pero /.como se crea un boton de envio? El lenguaje HTML consta de una etiqueta, input, que permite 
insertar varios tipos de controles, entre los que se encuentra el boton de envio. Para indicar el tipo de control que 
queremos insertar se usa el atributo type. Para crear el boton de envio debemos usar type= " submit". Por tanto 
si en el ejemplo anterior queremos insertar uno, debemos anadir esta etiqueta (de ahora en adelante omitiremos 
las etiquetas html, head y body, pero por supuesto debe seguir usandose): 


T TT 
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<H1>F0RMULARI0 DE EJEMPL0</H1» 

<FORM> 

<P>Introduzca su nombre: <INPUT TYPE="Text"> 
<PXINPUT TYPE="Submit "> 

</FORM> 


Si visualizamos este codigo con un navegador, veremos que la caja de texto esta acompanada ahora de un boton 
con un texto que invita a pulsarlo para mandar los datos. En la figura 12.5 vemos que al visualizar este ejemplo 
con Internet Explorer™ 4.0 aparece el texto ’Enviar consulta’ en el boton, este texto ha sido puesto por defecto 
por este navegador, pero si visualizamos este codigo con otro puede cambiar. Si el navegador usado es una version 
inglesa, el texto del boton estara en ingles. Esta situation es poco deseable en la mayorfa de las ocasiones, por 
los que se creo un atributo, value, que nos permitira especificar nosotros mismos el texto que queremos que sea 
mostrado en el boton. Asf en podemos reescribir el codigo para insertar el boton como: 

Figura 12.5. Usando el codigo < input type=" submit "> podemos insertar un boton de 
envio de manera que al pulsar sobre el se envian los datos del formulario. 



<PXINPUT TYPE="Submit" VALUE="Envieme"> 

Con lo que el resultado obtenido serfa el que apreciamos en la figura 12.6. En este caso en el boton el mensaje es 
’Envieme ’ y sera este siempre, independientemente del navegador que usemos para visualizar la pagina. En esta 
misma figura podemos apreciar que el tamano del boton se adapta a la longitud del texto que pongamos en el. 
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Figura 12.6. Con el atributo value podemos cambiar el texto por defecto del boton de 
envio por uno de nuestra eleccion. El ancho del boton se adaptara a la longitud del texto. 



Aunque lo habitual es incluir un unico boton de envio el lenguaje HTML permite la posibilidad de incluir varios. 
En este caso debemos usar un nuevo atributo, name, para dar un nombre a cada uno que permita al servidor 
diferenciar cual se ha pulsado. Este nombre sera enviado junto con los datos cuando se pulse sobre el boton. 
De esta forma es posible reahzar acciones diferentes dependiendo de si se pulsa uno u otro. Por ejemplo podian 
incluirse botones que simulasen distintas direcciones a las que acceder tras introducir los datos: 

<INPUT TYPE="Submit" VALUE="Arriba" NAME="arriba"> 

<INPUT TYPE="Submit" VALUE="Izquierda" NAME="izquierda"> 

<IMPOT TYPE="Submit" VALUE="Derecha" NAME="derecha"> 

<XNPUT TYPE="Submit" VALUE="Aba jo" NAME="aba jo"> 


Es importante indicar que el atributo name no debe usarse unicamente para el boton de envio. A continuation 
aprenderemos a insertar los distintos tipos de controles existentes y crearemos formularios mas complejos que 
hasta ahora, por esta razon deberemos usar name en cada uno de los controles. Cuando se pulse el boton de envio 
se enviara los datos de cada control junto con el nombre especificado con este atributo. De esta forma el servidor 
podra saber el control en que se ha insertado cada data. Recordemos brevemente todos los atributos de la etiqueta 
INPUT cuando la usamos para insertar el boton de envio: 


<INPUT TYPE="Submit" NAME="Nombre" VALUE="Texto del boton"> 


Pasemos, sin esperar mas tiempo, a estudiar cada uno de los controles existentes en el lenguaje HTML. 

Controles de Formularios. 
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Todos los controles que pueden usarse a la hora de crear un formulario permitiran al navegante insertar informa¬ 
tion. Unas veces esta information consistira en la insertion de un texto, que podra ser de una sola lfnea o varias y 
que podra estar oculto o no. En otras ocasiones se ofrecera entre una serie de opciones entre las que simplemente 
hay que elegir una o varias. Todo ello se podra realizar de diferentes formas que ahora mismo comenzamos a 
estudiar. 

Para empezar vamos a ver una serie de controles todos los cuales se crean con la etiqueta input. Para diferenciar 
entre unos controles y otros se hare uso del atributo type que puede tomar los siguientes valores: text, 
password, radio, checkbox, submit, image, reset, f ile y hidden. Ademas del atributo TYPE, esta etiqueta 
consta de algunos mas cuya funcion variara del tipo de control estemos insertando, es decir, en funcion del valor 
del atributo type. Uno comun a todos es name, ya mencionado, con el que damos un nombre al control, y que es 
recomendable usarlo siempre. Otro tambien comun a todos sera align, que explicaremos con las cajas de texto. 

Una vez hecho este comentario, podemos empezar a estudiar cada uno de los tipos de control uno a uno. 

Cajas de texto. 

Ya hemos introducido antes las cajas de texto. Como resumen recordaremos que para insertar este tipo de control 
en una pagina Web se usa la etiqueta input (esta misma etiqueta sera la utilizada para insertar la mayorfa de 
controles), con TYPE="text". Es decir: 


<FORM> 

CINPUT TYPE="text"> 
</FORM> 


Si nuestra intention es insertar mas de un control sera conveniente darle un nombre a la caja de texto. Para ello 
usaremos, tal y como hacfamos con el boton de envfo, el atributo name: 


<FORM> 

<INPUT TYPE="text" NAME="mitexto"> 
</FORM> 


Como podemos apreciar la etiqueta input consta de una unica instruccion. Ya hemos visto los atributos type y 
name que existe siempre en la etiqueta input. Cuando insertamos una caja de texto, es decir, cuando ponemos 
TYPE="text" existen otros dos: 


size: Determina la anchura de la caja de texto. El valor por defecto de este atributo es 20 

caracteres, esta es la longitud de los ejemplos que vefamos en las figuras 12.3 a 12.6. En 
ocasiones convendra decrementar o incrementar este valor por defecto, pero en todo caso 
siempre sera conveniente mantener un valor menor de 50 caracteres de manera que la 
caja de texto quepa en la mayorfa de pantallas. Un problema adicional que dificulta 
una correcta election del tamano de la caja es que este tamano sera considerado de 
distinta forma por los distintos navegadores y mas aun si estos son de distintos sistemas 
operativos. En la figure 12.7 podemos ver una serie de cajas de texto de diferentes 
tamanos y las diferencias entre Internet Explorer™ y Netscape™ Navigator™ al mostrar 
el mismo codigo. 
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Figura 12.7. El atributo size nos permite variar la longitud de la caja 
de texto. Debemos tener en cuenta que en diferentes navegadores un 
mismo valor no se corresponde a una misma longitud. 


0 CAJAS DE TEXTO DE DIFERENTES TAMANOS - Microsoft Internet Ex 


Archive Edicion Ver }r a Favorites Ayuda 


4- 


CAJAS DE TEXTO DE DIFERENTES ' 


<nsn 

<m\ 


<rtsn 


*] Listo 


iT r CAJAS DE TEXTO DE DIFERENTES TAMAflOS - Netscape 


File Edit View Go Communicator Help 

.- 


CAJAS DE TEXTO DE DIFERENTES 1 


@T 


You are offline. Choose "Go Online..." to connect 






































Formularios. 


maxlength: Con este atributo limitamos el numero maximo de caracteres que pueden ser escritos en 

una caja de texto. El valor de este atributo puede ser mayor o menor que el especificado 
en size, y que es totalmente independiente. Si es mayor cuando lleguemos al final de la 
caja de texto los nuevos caracteres que insertemos iran desplazando hacia la izquierda 
a los primeros, que dejaran de estar a la vista (OJO, esto no quiere decir que sean 
borrados). Para entender el funcionamiento es mejor comprobarlo in situ con unos 
ejemplos. Recomendamos al lector que pruebe a visualizar los siguientes codigos, y 
que intente escribir una frase algo larga en cada uno de ellos: 


<INPUT TYPE = "text" SIZE="20" 
<INPUT TYPE="text" SIZE="20" 
<INPUT TYPE = "text" SIZE="20" 


MAXLENGTH="2 0"> 
MAXLENGTH="5"> 
MAXLENGTH="4 0"> 


Por ultimo queda decir que si no usamos el atributo maxlength el numero de caracteres 
que pueden introducirse en la caja de texto no tendra lfmite. 

value: Sirve para especificar un texto que debe aparecer por defecto en la caja de texto, antes de 

que el usuario escriba nada. Este texto suele ser, en general, o bien instrucciones o bien 
la respuesta mas probable. Veamos un ejemplo que ilustra estos dos casos: 


<FORM> 

<P>Nombre:<INPUT TYPE="text" VALUE="Introduzca aqui su^ 
r.ombrc " > 

<P>^Le gusta nuestro Web? -CINPUT. TYPE="text" VALUE="Si, < _ J 
mu chisimo"> 

</FORM> 


Invitamos al lector a que pruebe este ejemplo en su navegador y compruebe los resulta- 
dos. 

Alineamiento de controles. 

Tal y como hemos indicado antes, todos los controles que insertamos con la etiqueta input tienen un atributo, 
llamado align, que nos permitira seleccionar entre varios tipos de alineamiento. Este atributo aparecio en el 
estandar HTML 3.2, al contrario que el resto de etiquetas y atributos que hemos visto hasta ahora en este capftulo, 
que existen desde la version anterior del estandar (HTML 2.0). 

El atributo align puede tomar los siguientes valores: 


AL I GN= " t op 
AL I GN= "bott om 
AL I GN=" middle": 


Alinea verticalmente el control con la parte superior de la lfnea en que es insertado. 
Alinea verticalmente el control con la parte inferior de la lfnea. 

Situa el control a una altura media entre el resto de elementos de la lfnea. 


align=" left ": En este caso estamos alineando el control horizontalmente a la izquierda. Al 

contrario de lo que ocurrfa con las imagenes y con las tablas, el texto no bordeara 
el control por su derecha, situandose este en una lfnea propia. En la figura 12.8 
podemos ver un ejemplo de este tipo de alineamiento y del siguiente: 
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Figura 12.8. El atributo align de la etiqueta input nos permite 
alinear los controles. En este caso vemos una caja de texto 
alineada a la izquierda (align= " left"). 
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la izquierda del navegador. En este ejemplo hemos us ado el sigui 
palabras 'a' y 'la 1 .: 


<FORH><INPUT TYPE="text" ALIGN="left"></FORH> 

Como vemos, esto ha provocado un salto de llnea. 

Listo 


al iGN= "right Este valor es identico al anterior en funcionamiento, solo que ahora el control se 
situara a la derecha de la ventana del navegador. 

Todos el atributo align y todos estos valores existen para todos los controles que veamos a partir de ahora y que 
usen la etiqueta input. 

Para terminar con las cajas de texto veamos un resumen de todos sus atributos y sus funciones: 


CINPUT TYPE="text" NAME="nombre" VALUE="valor por defecto" SIZE="tamano" < _ J 
MAXLENGTH="longitud_maxima" ALIGN="alineamiento"> 
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Cajas de texto para claves. 

En ocasiones puede ser conveniente pedir al usuario algun tipo de information confidencial como puede ser una 
clave de acceso o password. Debemos tener en cuenta que algunos usuarios pueden estar en algun lugar publico o, 
al menos, con gente alrededor que pueden leer lo que escriba en la pantalla y por tanto no le interesara que lo que 
escribe sea mostrado en esta. El lenguaje HTML permite utilizar, en estos casos, una caja de texto modificada en 
la que al escribir se mostraran unicamente asteriscos. Para ello debemos usar TYPE="password" en la etiqueta 
INPUT. Un ejemplo tfpico de uso de password es al pedir una identification, por ejemplo para entrar en algunas 
secciones de una pagina. Para crear este formulario podemos usar el siguiente codigo: 

CH2XFONT COLOR="#808DFF">Formulario de autenticacion</F0NTx/H2> 

<FORM> 

<P>Introduzca su nombre: <INPUT TYPE="text" NAME="nombre"> 

<P>Imtroduzca su clave: <INPUT TYPE="password" NAME="clave"> 

<PXINPUT TYPE="submit" VALUE="Enviar"> 

</FORM> 


Visualizando este codigo con Explorer™ obtenemos el resultado de la figura 12.9. En ella vemos como el texto que 
hemos escrito en el segundo campo, el de la caja de texto para passwords, no ha sido mostrado siendo sustituido 
por asteriscos. 

Figura 12.9. Las cajas de texto para claves muestran asteriscos en lugar del texto que 
escribimos para aumentar la confidencialidad. 
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Aviso 

La caja de texto para claves o passwords simplemente impide que el texto que se escribe sea mostrado 
en pantalla, sin embargo este texto no es codificado al ser mandado al servidor Web, y por tanto no es 
seguro mandar datos confidenciales. 

Las cajas de texto para claves tambien tienen los atributos size, maxlength, value y align que vimos en las 
cajas de texto. Al igual que hicimos con estas, veamos un resumen de todos los atributos de las cajas de texto para 
claves: 


<INPUT TYPE="password" NAME="clave" SIZE="tamano" MAXLENGTH="lonqitud maxima". , 
VALUE="clave por defecto" &J*lGN="alineamiento"> 


Botones de eleccion. 

Estos controles reciben tambien el nombre de botones de radio, como traduccion directa de su denominacion 
inglesa radio buttons y porque en general los navegadores suelen darles una forma circular. Para insertar un boton 
de eleccion usaremos de nuevo la etiqueta input, pero esta vez el valor del atributo type sera radio: 


<FORM> 

<INPUT TYPE="radio"> 
</FORM> 


Este tipo de controles tiene dos estados o posiciones: seleccionado (ON) o no seleccionado (OFF), estando 
inicialmente todos en la posicion OFF. Tambien es posible especificar que un boton determinado este seleccionado 
inicialmente insertando el atributo checked en la etiqueta input de la siguiente manera: 

<INPUT TYPE="radio" CHECKED> 


Los botones de eleccion suelen ser insertados en los formularios en grupos, dando al usuario la posibilidad de 
elegir entre una serie de opciones. Cuando pulsamos sobre un boton de radio le pasamos a la posicion ON y 
permanecera en ese estado hasta que pulsemos en otra opcion del mismo grupo. Esto es asi porque entre los 
botones de radio de un mismo grupo solo uno de ellos puede estar seleccionado, por tanto cuando seleccionamos 
uno, aquel que estuviese seleccionado previamente dejara de estarlo. 

Para indicar que una serie de botones de eleccion pertenecen a un mismo grupo debemos incluir el mismo valor 
en el atributo name en todos ellos. Ademas debemos usar el atributo value para dar un nombre distinto a cada 
uno de los botones. Veamos un ejemplo: 


Indique el tipo de musica que m; 
<FORM> 

<PXINPUT TYPE="radio" NAME ="mi 
<P><INPUT TYPE="rad-£:Q ; "' NAME ="mi 
<PX INPUT TYPE="radio" NAME="mi 
<PXlNPUT TYPE="radio" NAME ="mi 
</FORM> 


le guste: 

ica" VALUE="Jazz">Jazz 
lea" VALUE="Pop">Pop 
ica" VALUE="Rock">Rock 
ica" VALUE="Country">Country 
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Con este codigo obtenemos el resultado que apreciamos en la figura 12.10. En ella vemos que unicamente el boton 
de radio correspondiente a ’Pop’ esta seleccionado. Invitamos al lector a que pruebe este ejemplo y observe como 
al seleccionar otro de los botones de eleccion el anterior deja de estar seleccionado. 

Figura 12.10. Los botones de eleccion permiten elegir entre un conjunto de opciones, de 
las cuales podemos elegir solo una. 



Por supuesto, es posible incluir varios grupos de botones de seleccion dentro de un mismo formulario. Por ejemplo 
al codigo anterior podrfamos anadirle (antes de </form>) este otro: 


<PXIMPUT TYPE="radio" NAME="cine" VALUE="Accion">Acci&oacute; n 
<PXINPUT TYPE="radio" NAME="cine" VALUE="Comedia">Comedia 

<PXINPDT TYPE="radio" NAME="cine" VALUE="CienciaFiccion">Ciencia-Ficci&oacute;n 
<PXINPUT TYPE="radio" NAME="cine" VALUE="Drama">Drama 


De esta manera tendrfamos el formulario de la figura 12.11 en la que vemos que se ha podido seleccionar ’Pop’ 
como tipo de musica favorito y ’Ciencia-ficcion’ como genero cinematografico preferido, al pertenecer los botones 
a distintos grupos. 
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Figura 12.11. En un mismo formulario podemos incluir varios grupos de botones de 
eleccion. Los visitantes podran seleccionar una opcion en cada uno. 
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Quiza el lector haya tenido ya la siguiente duda. Si en las cajas de texto se manda al servidor el texto que introduzca 
el usuario, ^que se envfa cuando usamos botones de eleccion? La respuesta es simple. Por un lado es necesario 
enviar el nombre del grupo (el valor del atributo name) y por otro la opcion elegida (el valor del atributo value). 
En el ejemplo anterior en el que se han seleccionado ’Pop’ y ’Ciencia- Fiction’ se enviara el siguiente mensaje: 


1ST 
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cine=CienciaFiccion 


Nota 

En realidad, el mensaje que se envfa no es exactamente el anterior, ya que este es codificado. Aun asf 
las diferencias no son muchas, y en este caso el mensaje, ya codificado, que se enviarfa constarfa de una 
unica lfnea: musica=Pop&cine=CienciaFiccion. 

Veamos un resumen de los atributos de este control: 


<INPUT TYPE="radio" NAME="Nombre_del_grupo" VALUE="Nombre_de_esta_opci6n" < _ J 
ALIGN="alineamiento"> 


Cajas de seleccion. 

Las cajas de seleccion guardan ciertos parecidos con los botones de radio, pero ademas permitiran seleccionar 
varias opciones en una lista. A1 igual que dichos botones tienen dos posiciones, seleccionados o no seleccionados, 
estando en esta ultima posicion inicialmente, a no ser que hayamos usado el atributo checked. Cada caja de 
seleccion es independiente del resto, y por tanto el valor del atributo name debe ser diferente en cada una. 

Para insertar una caja de seleccion debemos usar de nuevo la etiqueta input, pero esta vez con 
type= "checkbox Veamos un ejemplo de uso de este tipo de controles: 


Indique su profesion (escoja todas las que procedan): 

<FORM> 

<PXINPUT TYPE="checkbox" NAME="medico">Medico 

<PXINPUT TYPE="checkbox" NAME="programador" CHECKED>Programador 
<PXINPUT TYPE="checkbox" NAME="abogado">Abogado 
<PX,INPUT TYPE="checkbox" NAME="ingeniero">Ingeniero 
<CENTERX-INPUT TYPE=" sublftit " VALUE="Enviat".X/CENTER> 

</FORM> 


Pulsando sobre cada caja de seleccion se cambia de seleccionado a no seleccionado, independientemente de 
la posicion del resto. En el codigo podemos apreciar que es posible indicar que una caja de seleccion este 
seleccionada por defecto. En la figura 12.12 vemos este ejemplo, y podemos apreciar como es posible seleccionar 
varias opciones simultaneamente. 
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Figura 12.12. Las cajas de selection son independientes unas de otras, por los que es 
posible tener varias seleccionadas. 
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Con las cajas de seleccion tambien podemos usar el atributo value, en este caso no sera imprescindible, ya que 
el nombre dado con name es diferente en cada caso, pero a veces puede ser conveniente. En el caso de la figura se 
mandana al servidor el siguiente mensaje: 


programador=ON&ingeniero=ON 


Si hubiesemos usado el atributo VALUE se sustituirfa la palabra ON (que es la que se pone por defecto) por la 
que nosotros hubiesemos indicado en las cajas de seleccion con las opciones ’programador’ e ’ingeniero’. Por 
ejemplo si en el codigo anterior hubiesemos escrito lo siguiente en el codigo de la caja del ingeniero, dejando el 
resto igual: 


<PXIMPUT TYPE="checkbox" NAME="ingeniero" VALUE="SI">Ingeniero 


El navegador hubiera enviado el mensaje: 
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programado Sin geniero=ON 


Todos los atributos de este control quedan resumidos en el siguiente codigo: 


<INPUT TYPE="checkbox" NAME="Nombre" ALIGN="alineamiento"^ 
VALUE="valor_que_debe_enviarse"> 


Imageries. 

El lenguaje HTML permite una manera altemativa para insertar un boton de envfo personalizado, al poder usar en 
lugar del boton normal que hemos visto anteriormente una imagen creada por nosotros mismos. Para insertar este 
tipo de control debemos usar type=" image", mientras que la direction de la imagen se indica con el atributo 
SRC al igual que hatiamos con la etiqueta img. Aprovecharemos el ejemplo de este tipo de control para realizar 
un formulario que englobe lo visto hasta ahora. 

Ejemplo 12.1. 

Hemos elegido como motivo del formulario un sistema de reserva de habitaciones de un hotel. El usuario debera 
introducir ciertos datos y enviar posteriormente la reserva. Comenzamos el formulario creando un archivo nuevo 
y escribiendo la estructura basica de la pagina: 


<HTML> 

<HEAD> 


<TITLE>Boton de envio per 
</HEAD> 

<BODY BGCOLOR="#B6D6B6"> 


song31i2ado</TITLE> 


</BODY> 

</HTML> 


A continuation insertamos un encabezado y la etiqueta form, donde iremos insertando los distintos controles de 
los que consta el formulario (todo el codigo que mostremos de ahora en adelante en este ejemplo debe introducirse 
entre las instrucciones «BODY . . . > y </30BY>): 


<CENTERXH2XFONT COLOR="#8080FF">Hoteles El Paralso</FONTX/H2x/CENTER> 
<H3>Sistema de reserva de habitaciones:</H3> 

<FORM> 

</FORM> 


Los colores que hemos elegido ahora para el encabezado como antes para el color de fondo pueden ser cambiados 
por el lector a su gusto. 

Es hora de insertar los controles. En primer lugar debemos introducir un campo para preguntar el nombre. Para 
ello lo mas indicado es usar una caja de texto, elegimos un tamano de 30 caracteres con el atributo size y 
no usamos maxlength para no limitar la longitud del nombre que se pueda insertar. Ademas introducimos un 
segundo campo donde debe insertar una clave secreta, que debe elegir el mismo usuario, y que le servira para 
identificarse cuando llegue al hotel junto con su nombre. En este caso usaremos una caja de texto para claves. 
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Dado que la clave solo puede constar de 4 caracteres limitamos el tamano de la caja (si ze) y la longitud del texto 
que se puede escribir (maxlength) a este valor: 

<FORM> 

<P>Introduzca su nombre: <INPUI TYPE="text" NAME="nombre" SIZE="30"x/P> 
<F>Iutroduzca Una clave para su identificacidn (4 letras): <INPUT TYPE="password " t , 
NAME="clave" SIZE="4" MAXLENGTH="4"></P> 

<!— aqui iremos insertando el resto del codigo —> 

</FORM> 


Veamos lo que llevamos. Visualizando el codigo que hemos escrito hasta ahora obtenemos el resultado de la figura 
12.13. 

Figura 12.13. Este es el aspecto que tiene el codigo que hemos escrito hasta ahora. En el 
formulario de la clave solo se podran insertar 4 caracteres. 
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El siguiente paso sera preguntar al usuario que tipo de habitation desea reservar. Existen dos opciones, una 
habitation individual o una habitation doble. Para ofrecer estas dos respuestas posibles resultan idoneos los 
botones de radio, ya que solo una de las dos pueden ser seleccionadas simultaneamente. Los dos botones que 
necesitamos deben estar en el mismo grupo, para lo cual usamos NAME="habitAGt4H"> P ara diferenciarlas 
ponemos diferentes valores en el atributo value: 


<FORM> 

<P>Tipo de habitacion</P> 

<INPUT TYPE="radio" NAME="tipoHabifcaeio'b:" VALUE="i5SdiVit}u&l">Individual &nbsp;&nbsp; 
<INPUT TYPE="radio" NAME="tipoHabitacion" VALUE="doble" CHECKED>Doble 

</FORM> 


Los espacios &nbsp han sido usados para separar ambas opciones, ya que estan en la misma lfnea. La cadena 
"<! — ... —>" simplemente hace referenda a que en ese lugar va el codigo que hemos escrito antes para 

preguntar el nombre y la clave, aunque no lo repitamos de nuevo. De ahora en adelante lo usaremos para indicar 
’aqui va el codigo escrito anteriormente’. 

A continuation los duenos del hotel desean ofertar una serie de extras especiales junto con la habitation, de las 
cuales pueden elegirse (de manera independiente) las que se deseen. Las cajas de selection seran los controles 
que debemos usar en este caso. 


<FORM> 


<P>Opciones extra:</P> 

<INPUT TYPE="checkbox" NAME="desayuno" CHECKEDfcfljgsayuno en cama &nbsp;&nbsp; 
<INPUT TYPE="checkbox" NAME="jakuzzi">Jakuzzi &nbsp;&nbsp; 

<INPUT TYPE="checkbox" NAME="clima€$z:ador">Clintatizador 


</FORM> 


Por petition de los duenos, que quieren promocionar este servicio, hemos preseleccionado el desayuno en cama 
inicialmente usando el atributo checked. 

El ultimo paso sera insertar el boton de envfo. Podrfamos simplemente usar: 


<INPUT TYPE="submit" VALUE="Envieme"> 


Pero en este caso seremos algo mas originales y nos crearemos nuestro propio boton. Para ello unicamente 
necesitaremos un programa de dibujo y algo de creatividad. Una vez dibujado el boton debemos guardarlo en 
formato GIF o JPG, y lo ponemos en el mismo directorio donde esta la pagina que estamos creando. En nuestro 
caso hemos llamado a la imagen envio. gif. El codigo para insertar esta imagen de manera que sirva como boton 
de envfo sera: 


<FORM> 

<CENTER> <INPUT TYPE="image" NAME="envio" SRC="envio.gif"> 
</CENTER> 


~wr 
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</FORM> 


Con esto que podemos dar por concluido el formulario. En la figura 12.14 podemos apreciar el resultado de 
visualizar este formulario con el navegador Internet Explorer™ 4.0. Este es el aspecto inicial, con las opciones 
’Doble’ y ’Desayuno en cama’ preseleccionados al usar el atributo checked. 
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Figura 12.14. Este es el resultado final del formulario del ejercicio 12.1 en el que destaca 
el uso de una imagen personalizada como boton de envio. 


H Boton de envio personalized 

d - Microsoft Internet Explorer 

Archivo Edicion Ver Ir a favoritos Ayuda 
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Sistema de reserva de habitadones: 

Introduzca su nombre: | 

Introduzca una clave para su identificacion (4 letras): 
Tipo de habitacion 


P Individual P Doble 


Opciones extra: 

W Desayuno en cama I - Jakuzzi P Clunatizador 




Listo 
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Nota 


El navegador Explorer™ permite el uso de los atributos width y height para indicar el tamano de 
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las imageries de formularios. Tambien permite usar otros atributos de la etiqueta img como vspace 
y hspace para controlar los margenes verticales y horizontales alrededor de la imagen y border para 
controlar el grosor del borde. 

En este ejemplo hemos usado una imagen creada por nosotros mismos como sustituto del boton de envfo estandar. 
Sin embargo las imagenes de formulario tienen una funcion extra, ya que el navegador envfa, cuando el usuario 
pulsa una imagen, las coordenadas ’x’ e ’y’ sobre las que se ha pulsado, en relacion a la esquina superior izquierda, 
como si fueran parte de la informacion del formulario. De esta forma el servidor Web puede realizar diferentes 
acciones en funcion del lugar de la imagen donde se ha pulsado. De hecho este es un metodo alternative para crear 
una imagen mapa. Para ello no tenemos mas que usar el codigo: 


<FORM> 

<INPUT TYPE="image" SRC="imagenmapa.gif"> 
</FORM> 


Posteriormente debemos crear un programa en el servidor que sea capaz de leer los datos (es decir, las coordenadas 
donde se ha pulsado) de este formulario y devolver la respuesta oportuna. Mas sobre esto en la seccion ’Como 
usar los datos de un formulario’ que veremos mas adelante. 

En el capftulo 6 vimos la diferencia entre las imagenes mapa en el servidor y las imagenes mapa en el cliente (las 
que podfamos crear con el lenguaje HTML). Este nuevo tipo se corresponde con las procesadas con el servidor, y 
por tanto tiene el inconveniente de necesitar un programa externo que se ejecute en el servidor, por lo que no nos 
basta con el lenguaje HTML. 

Para terminar con las imagenes de formulario veremos, como hemos venido haciendo hasta ahora, un resumen 
con sus atributos: 


<INPUT TYPE="image" SRC="URL" NAME="Nombre"> 


Boton de borrado 

La mayorfa de los controles anteriores permitfan al usuario introducir una serie de datos o elegir entre una serie 
de opciones. Inicialmente las cajas de texto apareefan vaefas, a no ser que hubiesemos usado el atributo VALUE 
para asignarles por defecto. Igualmente los botones de eleccion y cajas de selection apareefan en position de no 
seleccionados a no ser que hubiesemos indicado lo contrario usando el atributo CHECKED. Una vez a cargado la 
pagina con el formulario en bianco o con unas opciones por defecto el navegante puede actuar sobre los controles 
y modificar sus valores (en esto se basa la interactividad). Pero quizas en algun momento decida que quiere dar 
marcha atras y recuperar los datos que aparecieron al principio. Con este fin existe en el lenguaje HTML un 
control que permite borrar los datos actuales de todos los campos del formulario y restablecer los valores por 
defecto, si es que los habfa. Este control recibe el nombre de boton de borrado o boton de reseteado (reset button 
). La creation de este control es muy sencilla. De nuevo usaremos la etiqueta INPUT, esta vez con TYPE= "reset"-. 


<INPUT t¥f>E="reset"> 


Este codigo provocara la aparicion de un boton como el boton de envfo con un texto por defecto que indica 
su funcion. Por ejemplo Internet Explorer 4.0™ muestra el mensaje ’Restablecer’. Este texto dependera del 
navegador que usen los visitantes de nuestra pagina, y dado que esto no siempre es deseable podemos usar el 


T95- 
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atributo VALUE, al igual que hacfamos con el boton de envfo, para especificar el texto que prefiramos. Veamos un 
ejemplo algo mas completo: 


<H2> 

<Fdfij' COLOR-"#8080FF"> 

F^iaaul aifi'b de ident ificacion 
</FONT> 

</H2> 

<FORM> 

<P>Introduzca su nombre: 
TYPE="text" 

NAME="nombre" 

VALUE="Introduzca su Nombre" 

SIZE-"30"> 

<p>Sexo: 

,<ttPE="RADIO" 

NAME="sexo" 

VALUE="hombre" 

CHECKED>Hombre 
<TttPUT IYPE="RADIO" 

NAME="sexo" 

VALUE=" mu j e r " >Mu j bit 
<P>Conent;a£a os : 

<INFUT TYPE="text" 
NAME="comentarios" 

SI«g="40"> 

<P> 

<INPUT TYPE="submit" 

VALUE="Enviar"> 

<TNBU:T 'TYPE=" reset" 
VALUE="Restablecer"> 

</FORM> 


En la figura 12.15 podemos ver este formulario con unos datos introducidos por un usuario (arriba) y tras pulsar 
el boton de borrado (abajo). Si no hubiesemos puesto unos valores por defecto en nuestro codigo HTML los datos 
campos simplemente se hubieran quedado vacios. 
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Figura 12.15. Elbotondeborrado (<input TYPE="reset" >) permitealusuarioborrar 
los datos introducidos y recuperar los iniciales. 
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Introduzca su nombre: fPepito P6rez. 

Sexo: C Hombre Mujer 
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Tras pulsar el boton 
'Restablecer' 
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Introduzca su nombre: |lntroduzca^su Nombre 
Sexo: (* Hombre ^ Mujer 
Comentarios: | 
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A1 igual que hemos hecho con los controles anteriores concluiremos con un resumen del codigo del boton de 
borrado. En este hemos incluido el atributo NAME, que, como comentamos al principio, esta presente en todos 
los controles: 


<i'NPUT TYFE="reset" 
NAME="nombre" 

VALUE="Texto del boton"> 


Boton generico 

Para completar la coleccion de botones de los formularios, nos encontramos con la posibilidad de insertar un boton 
generico, es decir, que no tiene ninguna funcion definida, sino la que nosotros queramos darle. Para insertar un 
boton generico usaremos la etiqueta INPUT con TYPE= "button": 


<xmm type "button" 
VALUE="Pulseme"> 


Las acciones que debe llevar a cabo este boton al ser pulsado solo pueden indicarse con lenguajes de script como 
JavaScript o VBScript y no con HTML estandar. Para insertar el codigo de estos lenguajes se usa el atributo 
ONCLICK: 


4JSPUT TYPE "button" 

VALUE="Texto del boton" 
ONCLICK="codigo de scrips 


No todos los navegadores soportan los lenguajes de script, y por tanto el boton generico debe ser considerado 
como una extension. Si lo usamos debemos ser conscientes que unicamente los navegadores que soporten el script 
usado podran hacer uso suyo. 

Por ahora no nos adentraremos en ningun lenguaje de script, ya que mas adelante en esta obra, estos seran 
tratados mas en detalle, pero mostraremos dos ejemplos sencillos que ilustran el funcionamiento de este tipo 
de botones. Estos ejemplos han sido probados con los navegadores Internet Explorer ™ y Netscape Navigator™ 
en sus versiones 3.0 y posteriores, pero pueden no funcionar con otros navegadores. 

El primero consistira en un boton cuya funcion sera cerrar una ventana del navegador. El codigo necesario sera: 
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VALUE="Cerrar ventana" 
onClick="window.close();"> 


</FORM> 


Es probable que al pulsar el boton nos aparezca un mensaje de aviso del navegador pidiendonos confirmacion para 
cerrar la ventana (ver figura 12.16). 

Figura 12.16. Los botones genericos tienen multitud de usos, entre los mas usados nos 
encontramos con el boton enlace y el boton para cerrar una ventana, que, como todos, 
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requieren hacer uso de un lenguaje de script. 


Q Botones genericos - Microsoft Internet Explorer 


Archivo Edicion Ver Ir a favoritos Ayuda 

j 2 • jlBlii 


BOTONES GENERICOS 

Ejemplo 1: Boton para cerrar una ventana 

Enlace a button2.html 


Ejemplo 2: Boton enlace 

Cerrar ventana j 



El segundo ejemplo es mas usado aun y consiste en usar el boton con la misma funcion que un enlace hipertexto. 
El resultado es mas atractivo, pero debemos usarlo con moderation, ya que no todos los visitantes tendran 
navegadores que entiendan este codigo: 


<FORM> 




<INPUT TYPE="button" 
VALUE="Cargar otra ventai 
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onClic)s=**window. location. replace 
(' buttonE. htmj/ J; ">’ 


</FORM> 


En el directorio botones podemos encontrar un archivo con ambos codigos para que el lector pueda probarlos. En 
la figura 12.16 vemos una muestra de este documento junto con el cuadro de dialogo con el que Internet Explorer 
4.0 ™ pide confirmacion para cerrar la ventana tras pulsar el boton del primer ejemplo. 

Nota 

El nuevo estandar HTML 4.0 introduce una nueva etiqueta para insertar botones en nuestra pagina: 
BUTTON. Esta etiqueta tiene un atributo, llamado TYPE, que nos permitira elegir entre los tres tipos 
de botones disponibles: envfo (TYPE=submit), borrado (TYPE=reset) o generico (TYPE=button). La 
gran innovation de esta etiqueta es que podemos insertar en el boton imagenes o texto formateado con 
codigo HTML. Veamos un ejemplo de como funcionara BUTTON: 


<BUTTON name="reset" 
type="restablecer"> 

Restablecer<IMG sre="pics/imagen.gif" 

</BUTTON> 


El texto e imagen entre la instruction de inicio y la de fin se insertaran en el boton. 

Campos ocultos 

Los campos ocultos son un tipo de control que unicamente sirve para incluir informacion adicional entre los datos 
del formulario. Este tipo de control es invisible, y por tanto el navegador no muestra ningun tipo de grafico para 
advertir de su existencia. 

^Para que sirve entonces un control oculto?. Si no aparece en la pagina y el navegante no puede hacer nada con 
el <;Cual es su funcion?. En general, los campos ocultos se usan para enviar informacion especffica al programa 
del servidor Web que procesara los datos enviados, por ejemplo si este programa es capaz de realizar varias 
funciones distintas con estos datos, podemos usar un campo oculto para pasarle la informacion de que debe hacer 
con los datos de este formulario concrete (debemos tener en cuenta que este mismo programa puede procesar la 
informacion de otros formularios tambien). Aun asf esta problematica queda fuerae de lo que pretendemos abarcar 
en esta section dedicada al lenguaje HTML. 

Los campos ocultos se crean usando la etiqueta INPUT con TYPE= "hidden". Ademas debemos usar los atributos 
VALUE y NAME, para indicar los datos y su nombre: 


:INPUT, :TYPE="hidden" 
NAME="nombre" 
VALUE="dat o s"> 
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Por ejemplo: 


:iNFUt TYPE="hidden" 

NAME="timcion" 

VALUE="enviar_mail"> 


Los formularios vistos desde Lynx 

Hasta ahora nos hemos limitado a mostrar como se vefan los controles con navegadores graficos, usando como 
ejemplo a Microsoft Internet Explorer 4.0™. Pero los formularios pertenecen al estandar HTML 2.0 y por tanto 
funcionan con todo tipo de navegadores, incluidos los que trabajan en modo texto como Lynx. Es interesante para 
los programadores de paginas Web conocer como son mostrados cada uno de los controles que hemos visto desde 
este navegador, para hacerse una idea de como se veran los formularios que de sus paginas. Dado que no siempre 
es facil encontrar un ordenador donde comprobar los resultados con Lynx, mostraremos una serie de capturas en 
las que hemos usado este navegador y las comentaremos brevemente. 

Lo primero que debemos tener en cuenta es que el boton de envfo no sera grafico, sino que sera similar a un enlace 
hipertexto, como ya comentamos en su momento. Las cajas de texto y las cajas de texto para claves se muestran 
con una linea horizontal, y en estas ultimas lo escrito es sustituido por asteriscos. En la figura 12.17 vemos un 
ejemplo, un cursor parpadeante (que no puede apreciarse en una imagen) indica el lugar donde podemos empezar 
a escribir: 

Figura 12.17. Los navegadores en modo texto como Lynx tambien son capaces de mostrar 
formularios, que aunque no sean graficos tienen la misma funcionalidad. 


F o rmul 

Formulario de autenticacion 

Introduzca su nombre: _ 

Introduzca su clave: * +++ _ 

Enviac 


El codigo usado es el mismo que el de la figura 12.9, en aquel caso el navegador usado para mostrar el resultado 
fue Internet Explorer™, las diferencias son apreciables. 

Pero mas interesante aun puede ser ver con este navegador nuestro ejemplo 1 de este capitulo (figura 12.14) con 
Lynx. El resultado que obtenemos puede ser apreciado en la figura 12.18 donde vemos que este navegador tambien 
puede mostrar botones de radio y cajas de selection. 
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Figura 12.18. En esta figura podemos apreciar cajas de texto y de clave, botones de 
eleccion y cajas de seleccion tal y como son mostradas por Lynx. 


Sistema de reserva de 

Hoteles El Paraiso 

habitaciones: 

Boton 

Introduzca su nombre 

: Pepe Perez 


Introduzca una clav 

e para su identificacion 

(4 letras) 

Tipo de habitacion 

(*) Individual ( ) 

Doble 


Opciones extra: 

[X] Desayuno en cam 

a |BI Jakuzzi [ ] 

Climatize 


[IMAGE]-Submit 



En este caso es tambien interesante ver que la imagen que usabamos como boton de envfo ha sido sustituido por 
el texto ’ [IMAGE]-Submit\ pero sigue funcionando. 

Innovaciones de Microsoft 

La companfa Microsoft™ en sus navegadores Internet Explorer 3.0™ y posteriores ha incorporado una serie 
de extensiones a la etiqueta INPUT para incrementar las posibilidades de los programadores de HTML. Estas 
extensiones afectan a todos los controles que hemos visto que hacen uso de esta etiqueta. 

La primera extension resultara conocida a los lectores, se trata del atributo TITLE , y su funcion sera mostrar un 
bocadillo explicativo cuando el usuario pase el cursor por encima del control. Veamos un ejemplo: 


<FORM> 

<P>Introduzca su nombre: 

'4?NPUT TYPE="text" 

NAME="nombre" 

Introduzca aqui su Nombre" 




</FORM> 
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Como podemos ver en la figura 12.19, cuando se mantiene el cursor un tiempo aparece un bocadillo con fondo 
amarillo (estandar de Windows) con el texto ’Introduzca aqui su nombre 

Figura 12.19. El atributo TITLE es una extension de Microsoft que permite dar una 
descripcion a los controles que sera mostrada en un bocadillo. 


Q Innovaciones de Microsoft - Microsoft Internet Explorer 
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Este atributo puede usarse con entera libertad, a pesar de tratarse de una extension, porque los usuarios de Internet 
Explorer™ podran beneficiarse de ella y los usuarios de navegadores que no lo entiendan no saldran perjudicados, 
simplemente se quedaran igual que si no lo hubiesemos usado. 

La segunda extension esta formada por dos atributos: TABINDEX y NOTAB. Cuando nos encontramos ante un 
formulario formado por varios controles, como el del ejemplo 1 (figura 12.14), se puede usar la tecla tabulador 
o TAB para pasar de uno a otro. Por defecto al pulsar esta tecla se pasa al siguiente control en el orden en que 
fueron insertados en el codigo HTML. El atributo TABINDEX nos permitira cambiar el orden. La forma de usarlo 
consiste en incluirlo en todos y cada uno de los controles asignandole un numero, este numero representara la 
posicion de ese control. El atributo NOTAB, por su parte indicara que este control esta fuera de la lista, y por lo 
general sera situado el ultimo de todos. Para entender ambos atributos mejor es necesario verlo con un ejemplo, 
para ello usaremos parte del codigo del ejemplo 1: 


<FORM> 

<P>1) Introduzca su nombre: 

<INPUT TYPE="text" 

NAME="nombre" 

TABINDEX="l n > 

<P>3) Introduzca una clave para su 
identificacion (4 letras): 
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<IHFOT TXPE="password" 
NAME="clave" 
TABINDEX="3"> 

<p>4) Biteebitin 
<INgTJJ IYPE="text" 
NAME="direccion" 
NOTAB> 

<P> 

2) Tipo de hab i.tac i on 
</p> 

TfPE="Radio" 
NAME-" t ipoHabitapldo-'" 
VALUE="individual" 
TABINDEX="2"> 
Individual 
<INPJJX TXPE="Radio" 
NAME=" t IpcHab : racion" 
VALUE="doble" 

CHECKED 
TABINDEX="2"> 

Dob lo 

</FORM> 


Tras introducir el nombre, cuando el usuario pulse el tabulador pasara a elegir el tipo de habitation, despues 
introducira la clave y por ultimo la direction. En el directorio ejem2 hemos incluido este ejemplo para que el 
lector pueda probarlo y compruebe el funcionamiento de los atributos TABINDEX y NOTAB. Debemos recordar 
que unicamente funcionaran con Internet Explorer 3.0™ o posterior. 

La ultima innovation que ha introducido Microsoft ™ son los atributos READONLY y DISABLED. Estos atributos 
funcionan exclusivamente con Internet Explorer 4.0™ (y posteriores), por lo que debemos tener cuidado al usarlos. 

Cuando usamos el atributo DISABLED en un control lo deshabitamos. En general este atributo unicamente es 
usado con cajas de texto. Cuando una caja de texto usa este atributo podra seguir mostrando texto (si usamos el 
atributo VALUE para poner un texto initial), pero el usuario no podra cambiarlo. Este control tampoco podra ser 
seleccionado, practicamente actua como si no estuviera. La funcion del atributo READONLY es muy similar, con 
la unica diferencia de que el control actua como tal, por ejemplo en una caja de texto podemos seleccionar con el 
raton el texto que hay en ella, pero tampoco podra modificarse el contenido. 

Nota 

Aunque en la documentation ofrecida por Microsoft ™ no aparece asf, el atributo READONLY solo 
funciona correctamente en las cajas de texto, pero no en los botones de election o en las cajas de 
selection. Quiza sea un fallo que se solucione en proximas versiones, pero hoy por hoy, para deshabilitar 
estos dos ultimos controles, debemos usar el atributo DISABLED. 

Veamos unos ejemplos con cajas de texto y botones de selection: 


<H2> 

Cajas de texto 
</H2> 

Normal: 

<HaET5t TZPE="text" 
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NAME="textol" 

VALUE="Texto ini«ial"> 
<BR> 

DISABLED: 

TYPE="text" 
NAME="texto2" 

VALUE="Texto in'issial" 
Pt SABI ED> 

<BR> 

READONLY: 

<IHFPT TXPE="text" 
NAME="texto2" 

VALUE="Texto inicial" 
READONLY> 

<BR> 

<H2> 

Botor.os de elecclon 

</H2> 

X o raa 1 : 

MSWl TYPE "radio" 
NAME="boton n 
CHECKED> 

<BR> 

DISABLED: 

<INPUT TYPE="radio" 
NAME="boton" 

DISABLED> 

<BR> 

READONLY: 

<INPUT TYPE="radio" 
NAME="boton" 

READONLY> 

<BR> 


En la figura 12.20 podemos ver el resultado de visualizar este codigo con Internet Explorer 4.0™. 
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Figura 12.20. Los atributos DISABLED y READONLY permiten deshabilitar un control 
de manera que solo sirva para mostrar datos. 
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Direccion 


Cajas de texto 


Normal: |TextoTniciaF 


DISABLED: | Texto in icial 


BEAD ONLY: |Tetfo initial 

Botones de eleccion 

Normal: P 
DISABLED: ® 

READONLY: 




Mi PC 


En los casos de la caja de texto y el boton de eleccion se observa claramente que el navegador le da una apariencia 
distinta para resaltar que esta deshabilitado. En el directorio disabled se ha incluido este ejemplo anadiendo 
tambien las cajas de seleccion para que el lector pueda probarlos. 

OTROS CONTROLES 


En esta section hemos incluido dos controles ligeramente diferentes a los que hemos visto hasta ahora, las cajas de 
texto multilfnea y los cuadros de seleccion. Ambos tienen sus propias etiquetas de HTML, y por tanto no usaran 
INPUT. 
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Cajas de texto multilinea: TEXTAREA 

Las cajas de texto multilinea o areas de texto son unos campos que funcionan de manera similar a un editor de 
texto muy sencillo en el que el usuario puede escribir. A1 contrario de lo que sucedfa con las cajas de texto 
convencionales (<input TYPE="text">), en esta ocasion sera posible escribir varias lrneas de texto, lo que es 
muy util para campos en los que se requiere una respuesta extensa. Por ejemplo, si deseamos que el usuario pueda 
escribir el texto de un mail , o escribir una serie de comentarios largos, las areas de texto seran tremendamente 
utiles. 

La etiqueta usada para insertar este nuevo control es TEXTAREA , que consta de cuatro atributos: 


• NAME : El nombre que queremos asignarle al control. Como siempre, este nombre sera enviado junto con los 
datos del area de texto al mandar el formulario. 

• ROWS: El numero de lrneas de la caja de texto. 

• COLS: El numero de caracteres visibles de cada linea. Este atributo es similar al atributo SIZE que vimos en 
las cajas de texto convencionales. 

La etiqueta TEXTAREA esta compuesta por una instruccion de inicio y una instruccion de fin, siendo obligatorio 
el uso de ambas. Entre ellas unicamente podra insertarse texto llano (sin ninguna etiqueta HTML) y este sera 
mostrado como contenido inicial del area de texto. Veamos un ejemplo: 


Poe favor haga sus corr.entaei os sobre esta pagina. 

<FORM> 

<TEXTAREA NAME="texto" 

ROWS="10" 

COLS="50"> 

Es la mjsjOir que he viat^hpimea, 

</TEXTAREA> 

</FORM> 


En la figura 12.21 podemos ver este codigo tal y como es mostrado por Internet Explorer 4.0™: 
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Figura 12.21. Las areas de texto (<textarea> </textarea>) permiten al usuario 
introducir texto de varias tineas como si de un sencillo editor de texto se tratara. 


Q Areas de texto - Microsoft Internet Explorer 


Archivo Edicion Ver Ir a favoritos Ayuda 
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Por favor haga sus comentarios sobre esta pagina. 



Y en la figura 12.22 el mismo visto con Lynx: 
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Figura 12.22. Lynx muestra las areas de texto como un conjunto de lmeas (tantas como 
hemos indicado con el atributo COLS) sobre las que el usuario podra escribir. 


Areas de texto 

For favor haga sus comentarios sobre esta pagina. 
□Es la mejor que he visto nunca._ 


Pulsando sobre el area de texto podremos empezar a escribir, al igual que hacfamos en las cajas de texto, pero con 
la diferencia de que ahora podremos pulsar ENTER cuando queramos para cambiar de lfnea. 

Si no pulsamos ENTER y llegamos al final de la lfnea el navegador debe decidir que hacer. Esta decision 
variara, por lo general, del navegador que estemos usando. Algunos, como Internet Explorer 4.0™, cambian 
automaticamente a la siguiente lrnea (text wrapping ), otros simplemente desplazaran el texto como ocurrfa con 
las cajas de texto y no cambiara de lrnea hasta que pulsemos ENTER y una minorfa simplemente ignorara lo que 
pulsemos hasta que cambiemos de lrnea pulsando esta misma tecla. 

El navegador Netscape™ introdujo una extension al lenguaje HTML estandar, que actualmente es soportada 
tambien por Internet Explorer ™, y que nos permitira tener un mayor control sobre la forma de actuar del 
navegador cuando se llegue al final de la lfnea. Esta extension se basa en un nuevo atributo, WRAP , que puede 
tomar los siguientes valores: 


1 WRAP=OFF: Es el valor por defecto en Netscape Navigator™ y provocara que el texto sea mostrado en una 
sola lrnea, desplazandose hacia la izquierda si es necesario, hasta que el usuario pulse ENTER. 

1 WRAP=SOFT: Este es el valor por defecto en Internet Explorer™ y provoca que el navegador pase automati¬ 
camente a la siguiente lfnea cuando se llega al final del area reservada. Sin embargo cuando se pulsa el boton 
de envfo, antes de mandar el contenido, el propio navegador vuelve a juntar todo el texto que fue escrito 
seguido en una sola lfnea. 

1 WRAP=HARD: Al igual que el valor anterior, este provoca que el navegador pase automaticamente a la 
siguiente lfnea, pero ahora la information se mandara al servidor Web con los saltos de lfnea, de la misma 
manera que si hubiesemos pulsado ENTER nosotros mismos al llegar al final de cada lfnea. 
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En la figura 12.23 vemos una pagina con los tres tipos de area de texto que hemos incluido en el directorio textarea 
para que el lector pueda probarlos. La diferencia entre los dos ultimos tipos no es apreciable por el usuario, pero 
si existen diferencias en el mensaje que se envfa al servidor. 

Nota 

La etiqueta TEXTAREA tambien admite el atributo ALIGN y las extensiones introducidas por Mi¬ 
crosoft™ que hemos visto anteriormente. Nos referimos a los atributos DISABLED, READONLY, 
TABINDEX, NOTAB y TITLE. 

Concluiremos las areas de texto con un resumen de la etiqueta TEXTAREA y sus atributos: 


CTEXTAREA NAME="nombre" 
ROWSlas" 
COLS="columnas" 
ALIGN="alineamiento" 

WRAP ^ "off | soft | hard"> 

Texto l&fefMl' 

</TEXTAREA> 


Cuadros de seleccion 

Este es el ultimo control para crear formularios que nos ofrece el lenguaje HTML. Su funcion sera dar a elegir 
entre una serie de opciones de manera que el usuario pueda elegir una o varias de ellas. Existen dos formas de 
mostrar estas opciones, como una lista con desplazamiento, o mediante una persiana desplegable. Enseguida 
veremos como es cada una y como crearlas. 

Para insertar un cuadro de seleccion usaremos la etiqueta SELECT , que consta de una instruction de initio y de 
una instruction de fin, entre las cuales introduciremos las diferentes opciones para el usuario. Para insertar estas 
opciones usaremos una nueva etiqueta, OPTION , que consta de una unica instruction. Veamos un ejemplo que 
ilustra el uso de uso de este tipo de control: 


<FORM> 

Elija un color:<BR> 
<CENTER> 

<SELECT NAME="color"> 
<OPTlON>Verde 
<0 p::ON>K eqro 
<cp:: :oN>Ro jc 
<CP : :on>Az. j : 

</SELECT> 

</CENTER> 

<IXHUT TYPE="submit" 
VALUE="Eaviar eleccion"> 


"412” 


:/FORM> 
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Cuando se pulse el boton ’Enviar election’ se mandara al servidor el texto que sigue a la etiqueta OPTION, que 
se haya escogido (Por ejemplo ’color=Rojo’). 

Como podemos ver en la figura 12.24, este control suele ser mostrado, en los navegadores graficos, como una 
persiana desplegable, es decir, unicamente la opcion actualmente seleccionada es visible, y pulsando sobre una 
flecha se muestran el resto de opciones. 

Figura 12.24. Los cuadros de seleccion permiten mostrar varias opciones para que el 
usuario pueda elegir. En esta ocasion vemos su forma de persiana desplegable. 


0 Cuadros de seleccion - Microsoft Internet Explorer 


Archive Edicion Ver Ir a Favoritos Ayuda 

0 


Direccion 


Elija un color: 


Enviar eleccion 


Verde 



|Azul 1 





J Mi PC 




Existe un atributo, SELECTED, que nos permitira elegir la opcion que debe estar seleccionada por defecto. Por 
ejemplo, si en el codigo anterior queremos que el color negro aparezca seleccionado inicialmente tendremos que 
escribir: 


<SELECT NAME="color"> 
<OPTXON>Verde 
*OPTION SELECTED>Negro 
<0PTI0N>RO jo 
<OPTXON>Azul 
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</SELECT> 


A1 principio hemos comentado que los cuadros de seleccion pueden mostrarse como persianas desplegables, o 
bien como listas con desplazamiento. Hasta ahora solo hemos visto el primer caso en el que unicamente la opcion 
seleccionada es visible. En ocasiones puede ser conveniente que todas, o al menos algunas de las posibilidades 
sean mostradas directamente, sin tener que pulsar un boton. Para conseguir esto el lenguaje HTML ofrece el 
atributo SIZE, que determina el numero de opciones que pueden ser vistas simultaneamente. Si este valor es 1 (o 
no se usa el atributo SIZE), se mostrara una persiana desplegable, como hemos visto hasta ahora. Si es mayor, se 
mostrara una lista, que podra tener barras de desplazamiento si no caben todas las opciones disponibles. Veamos 
un ejemplo: 


<FORM> 

Lista de la compra: <br> 
<CENTER> 

<SELECT NAME="compra" 
fj£ZK="6"> 

COPTION VALUE="Fruta"> 

Fruta 

<OPTION VALUE="Verdura"> 
Velrdu^ 

<OPTION VALUE="Ternera"> 

Te rnera- 

<OPTION VALUE="Manteqtlilla"> 
Mantequilla 

<OPTION VALUE="Salchichas"> 
Salchichas 

<OPTION VALUE="PaSta"> 

Pasta 

</SELECT> 

</CENTER> 

<P> 


<1 IS PUT TYPE=" submit" 

VALUE="Enviar lista de la compra"> 


</FORM> 


En la figura 12.25 vemos este ejemplo: 
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Figura 12.25. Usando el atributo SIZE con un valor mayor que uno conseguimos que el 
cuadro de seleccion se muestre como una lista. 


Q Cuadros de seleccion - Microsoft Internet Explorer 
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I 


n 


Lista de la compra: 



Ternera 

Mantequilla 

Salchichas 

Pasta 


Enviar lista de la compra 


En este caso el numero de opciones es igual al tamano que le hemos dado al control, por lo que no han sido 
necesarias barras de desplazamiento. 

Si no indicamos lo contrario, los cuadros de seleccion actuan como los botones de radio, es decir, sola una option 
puede ser elegida simultaneamente. Afortunadamente, es posible cambiar este comportamiento, y permitir la 
seleccion de varias opciones, usando el atributo MULTIPLE en el interior de la etiqueta SELECT. En el ejemplo 
de la lista de la compra esta posibilidad es de gran utilidad, anadiendo este atributo al codigo anterior queda: 


<FORM> 

Lista de la compra :<BR> 
<CENTER> 

<SELECT NAME="compra" 
SIZE="6" 

MULTIPLES' 


Try 
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COPTION VALUE="Fruta"> 

Frp.ta 

COPTION VALUE="Verdura"> 

Vcrdura 

<OPTION VALUE="Ternera"> 

Ternera 

<OPTION VALUE="Mant equi11a"> 

Mantequilla 

<OPTION VALUE="Salchichas"> 

Sal^ffichas 

COPTION VALUE="Pasta"> 

Pasta 
</SELECT> 

</CENTER> 

NOTA (usuarios de Windows) : Para seleccionar varias opciones 
mantengan pulsada la tecla <CO:::-:>Co.it,rol 
</CODE> y seleccidnenlas con el raton. 

<p> 


CAPUT TYPE—"submit" 

VALUE="Enviar lista de la compra"> 


</FORM> 


La forma de seleccionar varias opciones simultaneamente dependera del navegador que usemos. En general 
consistira en mantener apretada una tecla mientras se seleccionan las diferentes opciones con el raton. Para 
facilitar la tarea de los navegantes puede ser conveniente anadir a la pagina una nota explicativa sobre la manera 
de elegir varias opciones, tal y como hemos hecho en este ejemplo. En la figura 12.26 podemos ver como es 
mostrado Internet Explorer 4.0™: 


416 
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Figura 12.26. Usando el atributo MULTIPLE el usuario podra seleccionar varias de las 
opciones que se ofrecen en la lista. 


Q Cuadros de selection - Microsoft Internet Explorer 
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Lista de la compra: 



NOTA (usuarios de Windows): Para seleccionar varias opciones mantenganpulsadalatecla Coi 
y seleccionenlas con elraton. 


Enviar lista de la compra 

[*] Lists |~ ~| | | |J|jMiPC 


Y en la figura 12.27 el mismo codigo, esta vez visto desde Lynx: 
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Figura 12.27. El navegador Lynx tambien es capaz de mostrar cuadros de seleccion, por 
lo que podremos usarlo con libertad. 


Elija un color: 


Enviau eleccion 



Nota 

La etiqueta SELECT tambien consta del atributo ALIGN para elegir su alineamiento. En lo que a 
extensiones se refiere, tambien podemos usar el atributo DISABLED en la etiqueta SELECT para 
desabilitarla, aunque solo funcionara con Internet Explorer 4.0™. Igualmente podemos usar el atributo 
TITLE tanto en SELECT como en OPTION para incluir una descripcion que sera mostrada en un 
bocadillo cuando el usuario situe el raton sobre el control, en el primer caso, o sobre la opcion especffica, 
en el segundo. 

Para concluir con los cuadros de seleccion solo nos resta hacer un breve resumen de las etiquetas SELECT y 
OPTION, y de sus atributos: 


<SELECT NAME="nombre" 
SIZE= ,, n°_elementos_visibles" 
MULTIPLE 

ALIGN="a1ine amient o" 
TITLE= ,, texto_bocadillo" 

TABINDEX="n" 

DISABLED> 

COPTION SELECTED 
VALUE="nombre de esta opcion" 
TITLE= ,, texto_bocadillo"> 


“4TB“ 






Formularios. 


PRACTICA 6-FORMULARIO PARA "Los Alpes" 

Ahora que ya conocemos todos los controles existentes para crear formularios es hora de hacer uno con apariencia 
profesional. Esto no quiere decir que use todos los controles existentes, sino que los use de una manera adecuada, 
cuidando la presentation y facilitando al usuario la introduction de datos. Como motivo hemos elegido crear una 
pagina mas del sitio Web de la agenda de viajes Los Alpes, que permita a los visitantes pedir que les envfen por 
correo un catalogo con todos los viajes disponibles. 

En primer lugar procederemos a escribir el codigo HTML necesario para crear los formularios y posteriormente 
nos dedicaremos a darle una apariencia profesional, tarea en la que podremos demostrar nuestra capacidad para 
usar tablas para controlar la disposition de los elementos en una pagina Web. 


PASO 1: Para comenzar partiremos de las paginas que creamos en la practica 5. Podemos realizar los 
cambios sobre estas mismas paginas o crear una copia en otro directorio (en el directorio pract5 se encuentran 
de nuevo las paginas de esta practica). Usando nuestro editor de texto/HTMLhabitual abrimos el archivo 
plantilla.htm donde creamos la plantilla de la pagina Web de Los Alpes. El aspecto de esta pagina es muy 
simple, como podemos ver en la figura 12.28: 

Figura 12.28. Este es el aspecto inicial de la plantilla del sitio Web de Los Alpes. 



En primer lugar, antes de realizar ningun cambio, guardamos este documento con el nombre form.htm . 
Sobre este nuevo archivo realizaremos los cambios. Lo primero que haremos sera adaptar el codigo de la 
plantilla a nuestros objetivos, cambiando la fecha y el tftulo de la pagina, y escribiendo un texto introductorio 
del formulario (ver figura 12.29): 

D1 
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Figura 12.29. El primer paso sera modificar la plantilla, cambiando el titulo y la fecha 
y escribiendo un texto introductorio. 



1 PASO 2: El siguiente paso consistira en insertar los controles del formulario. Dado que nuestro objetivo sera 
recoger el nombre, direccion, telefono, etc. del usuario, usaremos en su mayorfa cajas de texto, con la unica 
exception de un cuadro de selection para elegir el tipo de catalogo. El codigo necesario para insertar estos 
controles es: 


<FORM> 

<p>Ktambre completo: 
<EW0rf TYPE="text" 
NAME="nombre" 
SIZE="30"> 
<p>Direcci6n: 

<XNP0X TYPE="text" 
NAME="direccion" 
SIZE="50"> 
<P>Ciudad: 

<INP0X IYPE="text" 
NAME="ciudad" 
SIZE="20"> 
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Codigo Postal: 

TtfPE="tex^:*' 

NAME="c.p." 

SIZE="6" 

MAXLENGTH="5"> 

<P>Telefono: 

Z$pE="textv* 

NAME="te1e foro" 

SIZE="10"- 
MAXLENGTH="9"> 

<P>Fax: 

4XNfitra: TYPE^'text*- 

NAME="FAX" 

s:z:-: '":o“ 
maxlength="9«> 

<P>Email: 

■«n?Ptra: type ":.ex-_” 

NAME="email" 

SIZE="30"> 

<P>Catalogo: 

<SELECT> 

<OPTION VALUE="nacional"> 

Nacional 

COPTION VALUE="internacional" SELECTED> 
Internacional 

<0PTI0N VALUE="completo"> 

Cornpleto 

</SELECT! 


<P> 

•<XNPtIT TYPE="image" 
BORDER="0" 

SRC="img/enviar.jpg" 
VALUE="Enviar"> 


</FORM> 


Y deberemos insertarlo a continuacion del texto introductorio. Este codigo no tiene demasiada complejidad, 
pudiendo destacarse la limitacion a cinco caracteres para el codigo postal y a nueve el del numero de telefono 
y fax, con lo que evitamos posibles equivocaciones de los usuarios. En ambos casos hemos usado el atributo 
MAXLENGTH para imponer esta limitacion. En esta pagina hemos decidido, ademas, usar un boton de 
envio personalizado, acorde con la apariencia del Web. Este y otro material necesario para la practica puede 
encontrarse en el directorio pract6/material. 

D1 Una vez realizados estos cambios y escrito el codigo anterior obtenemos el resultado que vemos en la 
figura 12.30. 

Figura 12.30. Usando los conocimientos adquiridos en este capftulo utilizamos las 
etiquetas INPUT y SELECT para crear los controles del formulario. 




Formularios. 



Listo 


ID Mi PC 
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1 PASO 3: Podrfamos dejar el formulario asf, y publicarlo en Internet; de hecho gran parte de los formularios 
que encontramos tienen una apariencia similar a esta. Sin embargo en capitulos anteriores hemos aprendido 
a usar tablas para controlar la disposicion de los elementos y es hora de usar estos conocimientos para dar a 
nuestro formulario una apariencia mucho mas profesional. En un Web real un buen diseno incita a un mayor 
numero de navegantes a rellenar el formulario. 

Para empezar cambiamos el titular por una imagen (pract6/material/catalogo. gif) en la que hemos escrito 
el mismo texto con un tipo de letra que Simula escritura manual. El resto de cambios hacen uso de tablas. Para 
realizar el diseno suele ser conveniente hacer un boceto sobre el papel o con un programa de dibujo, donde 
no existen las limitaciones del lenguaje HTML. Una vez hecho el boceto es hora de usar este lenguaje para 
plasmarlo sobre una pagina Web. Tras hacer esto en nuestro formulario concluimos que serfa adecuado usar 
una tabla de nueve bias y tres columnas. De las bias la primera es para el tftulo y para el texto introductorio, 
mientras que el resto son para cada campo del formulario. La primera columna contendra el texto indicativo 
del formulario alineado a la derecha A^r.GN " ^lght">), la segunda contendra el control en sf y la 
tercera servira unicamente como margen derecho. En la bgura 12.31 mostramos el formulario con su nueva 
apariencia mostrando los hordes de la tabla, para que el lector pueda apreciar la estructura de la tabla: 


Figura 12.31. Usando una tabla de nueve filas y tres columnas controlamos la 
disposicion de todos los elementos de la tabla para conseguir un diseno profesional. 
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Q LOS ALPES - Pida nuestro catalogo - Microsoft Internet Explorer 


Archivo Edicion Ver Ir a Favoritos Ayuda 


4 =« - 


- ® ® tfl I ® a 0 § i e 



Web realizado por: Tower Web 

Copyright © I 993 Los Alpes - Agenda de viajes 

Ultima actuahzadon: 1 de mayo de J 993 
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D1 Otro aspecto que podemos comentar es que el ancho total de la tabla sera de 600 pixeles, con lo que 
conseguimos que se visualice correctamente en todo tipo de monitores. Para que tambien quede bien en 
monitores grandes la centramos usando la etiqueta CENTER. Por otro lado, para crear cierta separation entre 
los diferentes campos podemos usar el atributo CELLSPACING, con el que controlamos la distancia en pixeles 
entre las diferentes celdas. 

La realization de este codigo es un ejercicio muy importante, ya que este tipo de retoques es muy comun en 
las paginas Web reales. Por esta razon dejamos al lector que intente mejorar el diseno de la pagina usando 
las pistas que le hemos dado. En cualquier caso, en el directorio pract6 se ofrece una posible solution. En la 
figura 12.32 podemos ver la pagina completa una vez introducida en la estructura de frames: 

Figura 12.32. Este es el aspecto final del formulario una vez introducido en la 
estructura con frames del sitio Web creado en la practica 5. 
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Q Agenda de viajes LOS ALPES - Microsoft Internet Explorer 
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La mejora en apariencia respecto a la que velamos en la figura 12.30 es apreciable. 


COMO USAR LOS DATOS DE UN FORMULARIO 


Una vez dominamos la creation, y diseno, de formularios en las paginas Web probablemente nos estamos 
preguntando /,como puedo hacer que me lleguen los datos?. La respuesta a esta pregunta va mas alia del lenguaje 
HTML. Requiere la puesta en action de unos programillas llamados CGIs, que se ejecutan en el servidor y que 
pueden estar escritos en practicamente cualquier lenguaje de programacion. 

Estos programas deben encontrarse en algun lugar del servidor Web. A1 enviar un formulario a uno, este procesara 
la information y contestara con la respuesta oportuna. Esta respuesta sera en general o bien la direction de una 
pagina o bien una pagina creada por el propio CGI. ^Como se envla information a un CGI?. Hasta ahora hablamos 
omitido este detalle, pero la etiqueta FORM consta de un atributo llamado ACTION donde debemos especificar la 
direction URL del programa CGI donde deben enviarse los datos. Ademas debe usarse otro atributo, METHOD 
, para indicarle como se mandaran estos datos. Este atributo puede tomar dos valores GET y POST, omitiendo 
todos los detalles, podemos decir que el primero se usa con formularios pequenos, mientras que el segundo sera 
el escogido para formularios donde la cantidad de information es grande. Una vez hemos visto estos atributos 
hemos de decir que para que los ejemplos que hemos visto funcionen cuando los publicamos en Internet habra 
que anadfrselos a la etiqueta <form>. Veamos un ejemplo: 


<FORM METHOD="post" 

ACT 1: //www.miservidor. es/cgi-bin/ 
programaCGI"> 

<!— Codigo para insertar los distintos controles —> 
</FORM> 


En este caso hemos supuesto la existencia de un CGI llamado programa CGI situado en el directorio cgi-bin 
(este es el nombre habitual del directorio donde suelen estar los CGIs) de nuestro servidor. El navegador mandara 
a este programa los datos del formulario codificado con un codigo especial, cuyo tipo MIME es application/x- 
www-form- urlencoded. En algunos de los ejemplos de este capftulo hemos visto ejemplos de como funciona esta 
codification. La etiqueta FORM, tiene un atributo, ENCTYPE, que nos permitira cambiar el tipo de codification. 
Si no queremos usar ninguna podemos escribir: 


<FORM ENCTYPE="text/plaiSS-' 
METHOD="post"..■> 

</FORM> 


No usar codification podra ocasionar problemas al enviar caracteres especiales como son las letras acentuadas, 
pero puede ser util en ocasiones, al no ser necesario decodificar el mensaje. 

La creation de los programas CGI excede los lfinites de esta section dedicada al lenguaje HTML, pero sera 
cubierta en detalle mas adelante debido a la gran importancia que tienen estos programas en la programacion de 
Internet y en concreto de paginas Web. Hasta entonces veremos algunos metodos alternatives que nos permitiran 
hacer uso de los formularios que hemos creado sin necesidad de CGIs. 
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Formularios sin CGIs 

Sin duda los programas CGIs permiten realizar muchas mas cosas que cualquier otro metodo, pero la necesidad 
de conocer un lenguaje de programacion nos lleva a buscar metodos alternativos que seran suficientemente buenos 
si no tenemos demasiados requerimientos. 

Una altemativa a los CGIs son los lenguajes de script, que nos permitiran interactuar con el navegante sin hacer 
uso del servidor. Pero la alternativa en la que nos centraremos aqul sera otra, que se basa en la posibilidad de 
mandar todos los datos de unformulario a una direccion de correo electronico. Esto es suficiente para el ejemplo 
de la practica 6, ya que simplemente necesitamos conocer los datos del usuario para mandar el catalogo, no 
necesitamos interactuar con el en manera alguna. Para conseguir que los datos de un formulario sean enviados por 
e-mail debemos usar las etiquetas ACTION, METHOD y ENCTYPE de la siguiente manera: 


<FORM ACTION="mailto:milogin@midireccion. i 
ENCTYPE="text/plain" 

METHOD="post"> 

</FORM> 


Donde hemos usado como ejemplo la direccion de correo electronico milogin@midireccion.es, que debe ser 
sustituida por aquella a la que queramos enviar los datos, que en general sera la nuestra como creadores del 
Web. 

Nota 

La funcion del atributo ENCTYPE="text/plain" es enviar los datos sin ninguna codificacion. Esto es 
conveniente para facilitar la lectura de los mismos, pero no necesaria. De hecho, en algunos casos 
aislados puede ser preferible no usar este atributo y usar la codificacion por defecto. 

A1 pulsar sobre el boton de envfo el navegador advertira al usuario (ver figura 12.33) que la pagina quiere enviar 
un e-mail , si el usuario acepta enviara los datos del formulario. 
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Figura 12.33. Como metodo alternativo a los CGIs pueden mandarse los datos 
del formulario por correo electronico. En ese caso el navegador pedira al usuario 
confirmacion de la action. 



Nota 

Al contrario que los CGIs, el metodo alternativo que envfa por correo electronico los datos del formulario 
puede no funcionar con algunos navegadores. Sin embargo actualmente un gran numero de ellos, 
incluyendo Netscape Navigator ™, Internet Explorer™ y Opera™, soporta esta caracteristica, por lo 
que podemos usarlo con suficientes garantfas. 

Con este metodo alternativo podemos empezar a usar todos los formularios que hemos visto hasta ahora, y 
practicar con ellos. Cuando, mas adelante, estudiemos a fondo los CGIs veremos como nuestras posibilidades 
se incrementan enormemente. 
















Formularios. 


ENVIO DE FICHEROS USANDO FORMULARIOS 


Como apendice a los formularios incluimos un metodo introducido por Netscape™ y aceptado por el estandar 
HTML 3.2 que permite a los visitantes de una pagina mandar un archivo presente en su ordenador a la pagina 
Web. 

Con los controles que hemos visto hasta ahora se podia enviar un archivo de texto copiandolo a un area de texto, 
pero no existia ninguna manera de mandar, por ejemplo, una imagen o un programa. Con este nuevo sistema sera 
posible enviar ficheros de todo tipo. 

Los cambios respecto a los controles anteriores no son muchos. En primer lugar debemos hacer uso del atributo 
ENCTYPE especificando que los datos que se van a enviar desde este formulario al servidor seran de tipo 
multipart/form-data, despues debemos usar ACTION para especificar la direccion de un programa del servidor 
Web que sea capaz de recoger este archivo y realizar las acciones oportunas con el, por ejemplo: 


<FORM ENCXYPE="mulfelp,art/form-data" 
ACTION="http://www.miservidor.es/cgi-bin/ 
cogefichero"< 

</FORM< 


En lo que al control en si se refiere usaremos de nuevo la etiqueta INPUT, esta vez con TYPE= "file El navegador 
lo mostrara como una caja de texto junto con un boton que permitira al usuario buscar entre sus archivos el que 
quiere enviar. Un ejemplo con el codigo completo seria: 


<FORM ENCTYPE="multipart/form-data" 
ACTION="http://www.miservidor.es/cgi-bin/ 
cogefichero"> 

Envia r el f idlieEp : 

<INPUT NAME="fichero_usuario:* r 
TYPE "f I.l.e"> 

<INPUT TYPE="submit" 

VALUE="Enviar fichero"> 

</FORM> 


Usando este codigo se obtiene el resultado que observamos en la figura 12.33 en la que se muestra tambien el 
cuadro de dialogo que ofrece Internet Explorer 4™ cuando se pulsa sobre el boton ’Examinar...’. 



Formularios. 


Figura 12.33. Como metodo alternativo a los CGIs pueden mandarse los datos 
del formulario por correo electronico. En ese caso el navegador pedira al usuario 
confirmation de la action. 



Hasta aquf es sencillo. La parte mas dificil en el envfo de ficheros desde paginas Web consistira en crear un 
programa para el servidor que sea capaz de recibirlo. Por lo general puede ser conveniente obtener alguno hecho 
por profesionales que realice, o al menos nos ayude, a realizar esta labor. Para ello recomendamos al lector que se 
dirija a la direction: 


• http://www.bio.cam.ac.uk/cgi-lib/ [http://www.bio.cam.ac.uk/cgi-lib/] 

Si esta interesado en adquirir information para crear el programa usted mismo puede obtener toda la information 
necesaria en el servidor FTP: 


ftp://ds.internic.net/rfc/rfcl867.txt [ftp://ds.internic.net/rfc/rfcl867.txt] 


















